javascript提示框实现延迟提示代码详解-js教程-PHP中文网

javascript提示框实现延迟提示代码详解

伊谢尔伦

发布： 2017-07-22 10:43:09

原创

1453人浏览过

提示框功能：当鼠标指向头像时，弹出一个信息框，鼠标可移动到信息框，当鼠标离开头像时信息框消失，当鼠标离开信息框时信息框消失。

实现功能思路：

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>

登录后复制

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

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

立即学习“Java免费学习笔记（深入）”；

<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中文网其它相关文章！