基于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> 代码很简单主要是用到了JQuery的三个事件mouseover,mouseout,mousemove.

　　推荐阅读

　　基于jQuery的淡入淡出可自动切换的幻灯插件打包下载

思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,完全抛开旧的思维,才能找到新的出路. 其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且>>>详细阅读

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

地址：http://www.17bianji.com/kaifa2/JS/25700.html

1/2 1