jquery实现的提示浮层跟随鼠标移动

JQuery实现：

<html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="dns-prefetch" href="//www.jiangweishan.com"><link rel="dns-prefetch" href="//www.jiangweishan.comsearch.php"><link rel="dns-prefetch" href="//shang.qq.com"><link rel="dns-prefetch" href="//www.w3.org"><link rel="dns-prefetch" href="//img.jb51.net"><link rel="dns-prefetch" href="//www.jb51.net"><link rel="dns-prefetch" href="//files.jb51.net"><link rel="dns-prefetch" href="//pic002.cnblogs.com"><link rel="dns-prefetch" href="//www.mockplus.cn"><link rel="dns-prefetch" href="//www.aliyun.com"><link rel="dns-prefetch" href="//pagead2.googlesyndication.com"><link rel="dns-prefetch" href="//weibo.com"><link rel="dns-prefetch" href="//beian.miit.gov.cn"><link rel="dns-prefetch" href="//hm.baidu.com"><link rel="dns-prefetch" href="//www.zblogcn.com"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title><a href="https://www.jiangweishan.com/tags/jQuery/" target="_blank">jQuery</a>实现简单文字提示</title><style type="text/css"> #<a href="https://www.jiangweishan.com/tags/PR/" target="_blank">PR</a>ev<a href="https://www.jiangweishan.com/tags/ie/" target="_blank">ie</a>w{<a href="https://www.jiangweishan.com/tags/border/" target="_blank">border</a>:1<a href="https://www.jiangweishan.com/tags/px/" target="_blank">px</a> solid #cccccc; background:#9900CC;<a href="https://www.jiangweishan.com/tags/color/" target="_blank">color</a>:#fff; padding:5px; display:none; <a href="https://www.jiangweishan.com/tags/position/" target="_blank">position</a>:absolute;} </style><script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script></head><body><a class="preview">把鼠标放到这里1</a><br><br><br><a class="preview">把鼠标放到这里2</a><br><br><br><a class="preview">把鼠标放到这里3</a><br><br><br><a class="preview">把鼠标放到这里4</a><br><br><br><a class="preview">把鼠标放到这里5</a><script type="text/javascript"><a href="https://www.jiangweishan.com/tags/this/" target="_blank">this</a>.imagePrev<a href="https://www.jiangweishan.com/tags/IEa/" target="_blank">IE</a>w = <a href="https://www.jiangweishan.com/tags/function/" target="_blank">function</a>(){ /* CONFIG */ xOffset = 10; yOffset = 30; // 可以自己设定偏移值 /* <a href="https://www.jiangweishan.com/tags/end/" target="_blank">end</a> CONFIG */ $("a.preview").<a href="https://www.jiangweishan.com/tags/hover/" target="_blank">hover</a>(function(e){ $("body").<a href="https://www.jiangweishan.com/tags/append/" target="_blank">append</a>("<div id='preview'><a href="https://www.jiangweishan.com/tags/jquery/" target="_blank">jquery</a>实现简单文字提示</div>"); $("#preview") .<a href="https://www.jiangweishan.com/tags/CSS/" target="_blank">CSS</a>("top",(e.pageY - xOffset) + "px") .<a href="https://www.jiangweishan.com/tags/css/" target="_blank">css</a>("left",(e.pageX + yOffset) + "px") .fadeIn("slow"); }, function(){ $("#preview").fadeOut("fast"); }); $("a.preview").mou<a href="https://www.jiangweishan.com/tags/SEM/" target="_blank">SEM</a>ove(function(e){ $("#preview") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; // 页面<a href="https://www.jiangweishan.com/tags/%E5%8A%A0%E8%BD%BD/" target="_blank">加载</a>完执行 $(<a href="https://www.jiangweishan.com/tags/document/" target="_blank">document</a>).ready(function(){ imagePreview(); }); </script></body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]