滑鼠懸浮彈出跟隨滑鼠移動的帶箭頭的資訊層

標籤：

滑鼠懸浮彈出跟隨滑鼠移動的帶箭頭的資訊層:
很多網站，當滑鼠懸浮在一個元素上的時候能夠彈出一個資訊說明層，並且此層能夠跟隨滑鼠移動，同時彈出的層帶有箭頭，此箭頭指向滑鼠懸浮的元素，下面就通過執行個體代碼簡單介紹一下如何?此效果。
代碼執行個體如下:

 

<!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/

 

滑鼠懸浮彈出跟隨滑鼠移動的帶箭頭的資訊層