基於JavaScript實作滑鼠懸浮彈出跟隨滑鼠移動的帶箭頭的資訊層_javascript技巧
- WBOY原創
- 2016-05-16 15:19:381514瀏覽
很多網站，當滑鼠懸浮在一個元素上的時候能夠彈出一個資訊說明層，並且此層能夠跟隨滑鼠移動，同時彈出的層帶有箭頭，此箭頭指向滑鼠懸浮的元素，下面就通過實例程式碼簡單介紹一下如何實現此效果。
程式碼實例如下:
<!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中的時候能夠彈出一個資訊層，並且能夠跟隨滑鼠移動，彈出層的帶有指示的箭頭，程式碼非常的簡單這裡就不多介紹了，如有任何疑問可以跟帖留言或參閱相關閱讀。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn