利用jQuary实现文字浮动提示效果示例代码

复制代码 代码如下:

  <html>

  <head>

  <meta charset="utf-8"/>

  <script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>

  <script>

  /*文字提示*/

  /*

  (1)鼠标移入的时候,创建一个div它的内容是title属性的值

  (2)规定位置,设置css样式

  (3)鼠标移出的时候,移除div

  (4)鼠标移动的时候,X Y轴的坐标要相应的变化

  */

  $(function(){

  var x = 7;

  var y = 8;

  $("a.tip").hover(function(){

  var title = this.title;

  var $div = $("<div id='newTip'>"+title+"</div>");

  $("body").append($div);

  $div.css({"position":"absolute","background":"pink"});

  },function(){

  $("#newTip").remove();

  }).mousemove(function(e){

  var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'});

  });

  })

  </script>

  </head>

  <body>

  <a href="#" class="tip" title="这是我的提示">这是我的提示</a>

  </body>

  </html>