仿CSDN的鼠标悬停效果
仿照CSDN当鼠标悬停在用户头像上时显示用户相关信息的效果,代码及说明如下
<style type="text/css"> .pop{width:357px;height:194px;background:url(/eg/bgUserCard.gif) no-repeat;position:absolute;display:none;} .pop .ct{margin:10px 10px 10px 60px;} </style> <div class="pop" id="popDV" onmouseout="hide(event)" onmouseover="clearTimeout(mouseOutTimer)"><div class="ct">内容内容内容内容<a href="http://www./">编程设计网</a>内容内容内容内容内容内容</div></div> <div id="dvCT">今天上班公司要我做一个鼠标事件, 要求就象goolge翻译里面,翻译后生成的一个页面,<a href="#">鼠标悬停在一个文本</a>上面弹出一个 框框样的东西, 本来感觉还比较容易做的, 就是一个悬停事件,<a href="#"> 显示层</a>就可以了, 后面才发现, 要弹出的那个框框形状有点特别, 不知道哪位大虾知道用js画形状比较特别的框?</div> <script type="text/javascript"> function getAbsolutePosition(o){//获取对象的绝对位置 var p={x:o.offsetLeft,y:o.offsetTop}; while(o=o.offsetParent){ p.x+=o.offsetLeft;p.y+=o.offsetTop; } return p; } function showPopUp(){// var p=getAbsolutePosition(this),popDV=document.getElementById('popDV'); popDV.style.left=p.x+this.offsetWidth+'px'; popDV.style.top=p.y+'px'; popDV.style.display='block'; } var mouseOutTimer=false; window.onload=function(){//加载完毕后给a标签添加事件 var as=document.getElementById('dvCT').getElementsByTagName('a'); for(var i=0;i<as.length;i++){ as[i].onmouseover=showPopUp; as[i].onmouseout=function(){mouseOutTimer=setTimeout(function(){hide(true);},100);} } } function hide(e){ var dv=document.getElementById('popDV'); if(e===true)dv.style.display='none';//计时器直接隐藏 else{//如果鼠标从弹出层移出时,需要判断是否是移动到弹出层里面的子控件上了,因为移动到子控件,如a标签等上时,也会触发onmuseout事件 var refObj=e.toElement||e.relatedTarget; if(!dv.contains(refObj))dv.style.display='none';//不是div的子控件则隐藏 } } if(typeof HTMLElement!='undefined')HTMLElement.prototype.contains=function(o){//扩展非IE浏览器下的contains方法 if(this==o)return true; while(o=o.parentNode)if(o==this)return true; return false; } </script>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:仿CSDN的鼠标悬停效果