基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016-01-18 00:00
1171 查看
很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果。
代码实例如下:
以上代码实现了我们的要求,当鼠标放在div中的时候能够弹出一个信息层,并且能够跟随鼠标移动,弹出层的带有指示的箭头,代码非常的简单这里就不多介绍了,如有任何疑问可以跟帖留言或者参阅相关阅读。
javascript跟随鼠标的文字带滚动效果
Js鼠标跟随代码小手点击实例方法
javascript实现图片跟随鼠标移动效果的方法
代码实例如下:
<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="http://www.jb51.net/" /> <title>脚本之家</title> <style type="text/css"> #content { width:100px; height:100px; background:green; position:relative; margin:100px; } #inform { width:200px; height:200px; border:1px solid #ccc; background:white; display:none; position:absolute; } #inform span { width:0px; height:0px; border-width:10px; border-style:none solid solid none; position:absolute; } #inform .tb-border { left:-10px; border-color:transparent #ccc transparent transparent; top:-1px; } #inform .tb-background { left:-9px; border-color:transparent white transparent transparent; } </style> <script type="text/javascript"> window.onload=function() { var content=document.getElementById("content"); var inform=document.getElementById("inform"); content.onmouseover=function(ev) { var ev=ev||event; inform.style.display="block"; inform.style.left=(ev.clientX-this.offsetLeft+20)+"px"; inform.style.top=(ev.clientY-this.offsetTop-20)+"px"; } content.onmousemove=function(ev) { var ev=ev||event; inform.style.left=(ev.clientX-this.offsetLeft+20)+"px"; inform.style.top=(ev.clientY-this.offsetTop-10)+"px"; } content.onmouseout=function(ev){inform.style.display="none";} } </script> </head> <body> <div id="content"> <div id="inform"> <span class="tb-border"></span> <span class="tb-background"></span> </div> </div> </body> </html>
以上代码实现了我们的要求,当鼠标放在div中的时候能够弹出一个信息层,并且能够跟随鼠标移动,弹出层的带有指示的箭头,代码非常的简单这里就不多介绍了,如有任何疑问可以跟帖留言或者参阅相关阅读。
您可能感兴趣的文章:
javascript跟随鼠标x,y坐标移动的字效果javascript跟随鼠标的文字带滚动效果
Js鼠标跟随代码小手点击实例方法
javascript实现图片跟随鼠标移动效果的方法
相关文章推荐
- javascript学习过程中遇到的问题序列
- json的序列化
- json的反序列化
- JavaScript权威指南(1)——词法结构
- JavaScript权威指南(2)——类型、值和变量
- javascript中new Date()的浏览器兼容性问题
- JavaScript(一)
- JS之dom对象
- Javascript 中 typeof 和 instanceof 的区别
- 运动学JS
- html页面中div+javascript实现粘贴
- json:实体类和JSON对象之间相互转化
- json封装数据
- js-错误处理与调试,JSON
- 平稳退化,JS和HTML标记分离,极致性能的JavaScript图片库
- JavaScript:同步、异步和事件循环
- js日期格式化
- 数据访问的跨域解决方案:Jsonp
- js浮点数计算
- JavaScript之对象序列化详解