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

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > JavaScript鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

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

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</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>

代码描述：JavaScript 鼠标悬浮弹出鼠标移动信息层。JavaScript鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

下载全部收藏

178 237

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册