标签：
鼠标悬浮弹出跟随鼠标移动的带箭头的信息层:
很多网站，当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层，并且此层能够跟随鼠标移动，同时弹出的层带有箭头，此箭头指向鼠标悬浮的元素，下面就通过实例代码简单介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="http://www.softwhy.com/" /> <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中的时候能够弹出一个信息层，并且能够跟随鼠标移动，弹出层的带有指示的箭头，代码非常的简单这里就不多介绍了，如有任何疑问可以跟帖留言或者参阅相关阅读。
相关阅读:
1.border-color可以参阅CSS的border-color属性一章节。
2.onmouseover事件可以参阅javascript的onmouseover事件一章节。
3.var ev=ev||event可以参阅var ev=window.event||ev的作用是什么一章节。
4.clientX属性可以参阅javascript的clientX事件属性一章节。
5.offsetLeft属性可以参阅offsetLeft、clientLeft和scrollLeft等属性的用法一章节。
6.onmousemove事件可以参阅javascript的onmousemove事件一章节。
7.onmouseout事件可以参阅javascript的onmouseout事件一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9802
更多内容可以参阅:http://www.softwhy.com/javascript/
标签：
原文地址：http://www.cnblogs.com/come-on/p/5136240.html
