滑鼠懸浮彈出跟隨滑鼠移動的帶箭頭的信息層:很多網站，當滑鼠懸浮在一個元素上的時候能夠彈出一個信息說明層，並且此層能夠跟隨滑鼠移動，同時彈出的層帶有箭頭，此箭頭指向滑鼠懸浮的元素，下麵就通過實例代碼簡單介紹一下如何實現此效果。代碼實例如下:螞蟻部落 以上代碼實現了我們的要求，當鼠...
滑鼠懸浮彈出跟隨滑鼠移動的帶箭頭的信息層:
很多網站，當滑鼠懸浮在一個元素上的時候能夠彈出一個信息說明層，並且此層能夠跟隨滑鼠移動，同時彈出的層帶有箭頭，此箭頭指向滑鼠懸浮的元素，下麵就通過實例代碼簡單介紹一下如何實現此效果。
代碼實例如下:
<!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/
