首页 > web前端 > js教程 > 正文

JS延时提示框实现方法详解

PHPz
发布: 2018-10-13 16:17:21
原创
1390 人浏览过

这篇文章主要介绍了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(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
  op2.onmouseover=function()
  {
    clearTimeout(time);
  };
  op2.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
};
</script>
登录后复制

由于代码看起来多差不多,可以简化如下:

<script>
window.onload=function()
{
  var op1=document.getElementById(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op2.onmouseover=op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op2.onmouseout=op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },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教程

相关标签:
js
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!