JQuery实现一个简单的鼠标跟随提示效果

时间：2010-09-23 来源：忧忧夏天

1.效果如图

2.实现思路

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

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

　　　　将创建好的div加到文档中

　　　　为提示层设置位置

　　2 鼠标移出标题

　　　　移除div

　　3 当鼠标在标题内移动时

　　　　同样添加div效果

3.JQuery实现代码

代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6 </head>
 7 
 8 <style type="text/css">
 9     body
10     {
11         font-size:12px;
12     }
13     a
14     {
15         text-decoration:none;
16     }
17     a:hover
18     {
19         color:#CC0000;
20     }
21     #main
22     {
23         margin:100px auto;
24         width:350px;
25         height:150px;
26         border:solid #aaa 1px;
27     }
28     .tr_color{            
29         background-color:#aaa;        
30     }
31 </style>
32 
33 <script src="../JQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
34 <script type="text/javascript">
35     $(function(){
36         $("tr:even").addClass("tr_color");
37     
38         $("#tb a").mouseover(function(e){
39             var toolTip = "<div id='tooltip' width='100px' height='12px' style='position:absolute;border:solid #aaa 1px;background-color:#F9F9F9'>" + $(this).html() + "</div>";
40             $("body").append(toolTip);
41             $("#tooltip").css({
42                 "top" :e.pageY + "px",
43                 "left" :e.pageX + "px"
44             });
45 
46         $("#tb a").mouseout(function(){
47             $("#tooltip").remove();
48         });
49         
50         $("#tb a").mousemove(function(e){
51             $("#tooltip").css({
52                 "top" :(e.pageY+5) + "px",
53                 "left" :(e.pageX+2) + "px"
54             });
55         });                
56             //alert("Y:" + e.pageY + "X:" + e.pageX);
57         });
58     });
59 </script>
60 <body>
61     <div id="main">
62         <h5>JQuery--鼠标跟随提示</h5>
63         <table id="tb" width="100%">
64             <tr>
65                 <td><a href="#">中秋快乐11</a></td>
66                 <td><a href="#">中秋快乐12</a></td>
67             </tr>
68             <tr>
69                 <td><a href="#">中秋快乐21</a></td>
70                 <td><a href="#">中秋快乐22</a></td>
71             </tr>
72             <tr>
73                 <td><a href="#">中秋快乐31</a></td>
74                 <td><a href="#">中秋快乐32</a></td>
75             </tr>
76             <tr>
77                 <td><a href="#">中秋快乐41</a></td>
78                 <td><a href="#">中秋快乐42</a></td>
79             </tr>
80             <tr>
81                 <td><a href="#">中秋快乐51</a></td>
82                 <td><a href="#">中秋快乐52</a></td>
83             </tr>
84             <tr>
85                 <td><a href="#">中秋快乐61</a></td>
86                 <td><a href="#">中秋快乐62</a></td>
87             </tr>
88         </table>
89     </div>
90 </body>
91 </html>

代码很简单主要是用到了JQuery的三个事件mouseover,mouseout,mousemove.