首頁 > 開發者 > JavaScript
基於JavaScript實現滑鼠懸浮彈出跟隨滑鼠移動的帶箭頭的資訊層，javascript箭頭
很多網站，當滑鼠懸浮在一個元素上的時候能夠彈出一個資訊說明層，並且此層能夠跟隨滑鼠移動，同時彈出的層帶有箭頭，此箭頭指向滑鼠懸浮的元素，下面就通過執行個體代碼簡單介紹一下如何?此效果。
代碼執行個體如下:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.bkjia.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中的時候能夠彈出一個資訊層，並且能夠跟隨滑鼠移動，彈出層的帶有指示的箭頭，代碼非常的簡單這裡就不多介紹了，如有任何疑問可以跟帖留言或者參閱相關閱讀。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
