这篇文章主要介绍了js延时提示框实现方法,以实例形式较为详细的分析了javascript实现延时提示功能的原理与具体实现步骤,具有一定参考借鉴价值,需要的朋友可以参考下
提示框功能：当鼠标指向头像时，弹出一个信息框，鼠标可移动到信息框，当鼠标离开头像时信息框消失，当鼠标离开信息框时信息框消失。
实现功能思路：
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>
【相关教程推荐】
1. javascript视频教程
2. javascript在线手册
3. bootstrap教程