您的位置:首页 > Web前端 > JQuery

jquery实现鼠标移动出现提示信息效果代码

2013-09-05 20:25 489 查看
本文章来给各位同学详细介绍关于jquery实现鼠标移动出现提示信息效果代码,有需要了解学习的同学不防进入参考。
<p style="text-align:center"><a href="http://www.php100.com/" class="jqueryba" title="欢迎大家来我的小博客">jquery博客</a>前端开发</p>

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript">
this.jqueryba = function(){ 
  xOffset = 10;
  yOffset = 20; 
 $("a.jqueryba").hover(function(e){             
  this.t = this.title;
  this.title = "";           
  $("body").append("<p id='jqueryba'>"+ this.t +"</p>");
  $("#jqueryba")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px")
   .fadeIn("fast");  
    },
 function(){
  this.title = this.t;  
  $("#jqueryba").remove();
    }); 
 $("a.jqueryba").mousemove(function(e){
  $("#jqueryba")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px");
 });   
};
$(document).ready(function(){
 jqueryba();
});
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: