提示框功能:当鼠标指向头像时,弹出一个信息框,鼠标可移动到信息框,当鼠标离开头像时信息框消失,当鼠标离开信息框时信息框消失。
实现功能思路:
1、获取元素。
2、当鼠标指向p1时,p2显示。
3、当鼠标离开p1时,使p2延迟0.5秒消失,这样以便有时间把鼠标移到p2。
4、当鼠标指向p2时,p2显示。因为第3步设置setTimeout使p2消失,所以把用clearTimeout()把setTimeout清除了就可以实现p2显示了。
5、当鼠标离开p2时,使p2延迟0.5秒消失,这样以便有时间把鼠标指向p1。
6、第2步已经设置了鼠标指向p1,p2就显示,但由于第5步设置setTimeout使p2消失,所以在第2步加上clearTimeout()把setTimeout清除了就可以实现p2显示了。
JS代码:
<script> window.onload=function() { var op1=document.getElementById('p1'); var op2=document.getElementById('p2'); time=null; op1.onmouseover=function() { clearTimeout(time); op2.style.display='block'; }; op1.onmouseout=function() { time=setTimeout(function(){ op2.style.display='none'; },500); }; op2.onmouseover=function() { clearTimeout(time); }; op2.onmouseout=function() { time=setTimeout(function(){ op2.style.display='none'; },500); }; }; </script>
由于代码看起来多差不多,可以简化如下:
<script> window.onload=function() { var op1=document.getElementById('p1'); var op2=document.getElementById('p2'); time=null; op2.onmouseover=op1.onmouseover=function() { clearTimeout(time); op2.style.display='block'; }; op2.onmouseout=op1.onmouseout=function() { time=setTimeout(function(){ op2.style.display='none'; },500); }; }; </script>
HTML、CSS代码:
<p id="p1"></p> <p id="p2"></p> <style> #p1{float:left;margin-right:10px;width:50px;height:50px;background:black;} #p2{display:none;float:left;width:200px;height:200px;background:#0CF;} </style>
以上是javascript提示框实现延迟提示代码详解的详细内容。更多信息请关注PHP中文网其他相关文章!