你的位置:首页 > 软件开发 > Java > JQuery实现一个简单的鼠标跟随提示效果

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

发布时间:2016-01-12 12:00:05
效果体验:http://hovertree.com/texiao/jsstudy/2/实现思路  1 鼠标移入标题(这里是<a>标签)    创建一个div,div的内容为鼠标位置的文本    将创建好的div加到文档中    为提示层设置位置  2 鼠标移出标题   ...

效果体验:http://hovertree.com/texiao/jsstudy/2/实现思路  1 鼠标移入标题(这里是<a>标签)    创建一个div,div的内容为鼠标位置的文本    将创建好的div加到文档中    为提示层设置位置  2 鼠标移出标题    移除div  3 当鼠标在标题内移动时    同样添加div效果上面是跟随光标的,这个是居中的:跟随光标完整代码如下:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery弹出光标跟随提示框- 何问起</title><base target="_blank" /> 6 <style type="text/css"> 7 #tooltip { 8 position: absolute; 9 border: #333 1PX solid;10 background: #f7f5d1;11 padding: 1px;12 color: #333;13 display: none;14 padding: 1px;15 }a{color:blue}16 #hovertree,#yestop,#hoverclock{width:789px;margin:20px auto}17 </style>18 <script src='/images/loading.gif' data-original="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>19 </head>20 <body>21 <div id="hovertree"><a href="http://hovertree.com" class="tooltip" title="何问起首页">何问起首页</a> <a href="http://hovertree.com/texiao/" class="tooltip" title="网页特效库">特效</a></div>22 <div id="yestop"><a href="http://hovertree.com/h/bjaf/tishikuang.htm" class="tooltip" title="本效果代码">原文</a>23 <a href="http://hovertree.com/texiao/jsstudy/2/" class="tooltip" title="本效果网址">效果</a>24 <br /><br /><a href="#" class="tooltip" title="弹出层">test</a>25 </div>26 27 <div id="hoverclock">请把光标在各个链接上面移动,将会弹出跟随光标的提示框。28 29 <br /></div>30 <script>31 $(function () {32 var x = 15;33 var y = 10;34 $("a.tooltip").mouseover(function (e) { //当鼠标指针从元素上移入时 35 this.myTitle = this.title;36 this.title = "";37 var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";38 $("body").append(tooltip);39 $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");40 }).mouseout(function () { //当鼠标指针从元素上移开时 41 this.title = this.myTitle;42 $("#tooltip").remove();43 }).mousemove(function (e) { //当鼠标指针从元素上移动时 44 $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });45 });46 });47 </script>48 </body>49 </html>

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

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录