你的位置:首页 > Java教程

[Java教程]鼠标悬浮弹出跟随鼠标移动的带箭头的信息层


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

 

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