基于JQuery的一个简单的鼠标跟随提示效果

124 阅读 0 评论 82 点赞

我是靠谱客的博主无心鸡翅，最近开发中收集的这篇文章主要介绍基于JQuery的一个简单的鼠标跟随提示效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.效果如图

2.实现思路

　　1 鼠标移入标题（这里是<a>标签）

　　　　创建一个div，div的内容为鼠标位置的文本

　　　　将创建好的div加到文档中

　　　　为提示层设置位置

　　2 鼠标移出标题

　　　　移除div

　　3 当鼠标在标题内移动时

　　　　同样添加div效果

3.JQuery实现代码

复制代码代码如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
</head> 
<style type="text/css"> 
body 
{ 
font-size:12px; 
} 
a 
{ 
text-decoration:none; 
} 
a:hover 
{ 
color:#CC0000; 
} 
#main 
{ 
margin:100px auto; 
width:350px; 
height:150px; 
border:solid #aaa 1px; 
} 
.tr_color{ 
background-color:#aaa; 
} 
</style> 
<script src="../JQuery/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function(){ 
$("tr:even").addClass("tr_color"); 
$("#tb a").mouseover(function(e){ 
var toolTip = "<div id='tooltip' width='100px' height='12px' style='position:absolute;border:solid #aaa 1px;background-color:#F9F9F9'>" + $(this).html() + "</div>"; 
$("body").append(toolTip); 
$("#tooltip").css({ 
"top" :e.pageY + "px", 
"left" :e.pageX + "px" 
}); 
$("#tb a").mouseout(function(){ 
$("#tooltip").remove(); 
}); 
$("#tb a").mousemove(function(e){ 
$("#tooltip").css({ 
"top" :(e.pageY+5) + "px", 
"left" :(e.pageX+2) + "px" 
}); 
}); 
//alert("Y:" + e.pageY + "X:" + e.pageX); 
}); 
}); 
</script> 
<body> 
<div id="main"> 
<h5>JQuery--鼠标跟随提示</h5> 
<table id="tb" width="100%"> 
<tr> 
<td><a href="#">中秋快乐11</a></td> 
<td><a href="#">中秋快乐12</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐21</a></td> 
<td><a href="#">中秋快乐22</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐31</a></td> 
<td><a href="#">中秋快乐32</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐41</a></td> 
<td><a href="#">中秋快乐42</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐51</a></td> 
<td><a href="#">中秋快乐52</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐61</a></td> 
<td><a href="#">中秋快乐62</a></td> 
</tr> 
</table> 
</div> 
</body> 
</html> 