信鸽网

基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

  作者：bea

很多网站，当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层，并且此层能够跟随鼠标移动，同时弹出的层带有箭头，此箭头指向鼠标悬浮的元素，下面就通过实例代码简单介绍一下如何实现此效果。 代码实例如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="aut

很多网站，当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层，并且此层能够跟随鼠标移动，同时弹出的层带有箭头，此箭头指向鼠标悬浮的元素，下面就通过实例代码简单介绍一下如何实现此效果。
代码实例如下:




<!DOCTYPE html>

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="/" />

<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中的时候能够弹出一个信息层，并且能够跟随鼠标移动，弹出层的带有指示的箭头，代码非常的简单这里就不多介绍了，如有任何疑问可以跟帖留言或者参阅相关阅读。





有用  |  无用

猜你喜欢

您可能感兴趣的文章: