Js学习之路八 --- 延时提示框

本文介绍了一种基于HTML、CSS及JavaScript实现的延时提示框功能。通过设置鼠标悬停事件与延时触发机制,实现了当鼠标停留在特定元素上时显示提示框,离开后延迟隐藏的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

延时提示框在很多网站和软件中都有使用,比如qq界面,将鼠标放到好友头像或者自己头像上会出现好友的名片,还有qq天气,移到上面就会出现天气详情。
具体效果请大家自己试验下哈!

延时提示框的实现原理中有两个主要的点:鼠标事件、延时触发 onmouseover、onmouseout,setTimeout

在此我要实现这样的功能:有两个div:红色div(显示) 蓝色div(隐藏) 。当鼠标移到红色div上的时候 蓝色div出现;从红色div上移走后,鼠标蓝色div过一秒才消失。但从红色div移到蓝色div上 蓝色div不消失;从两个div上都移走的时候 蓝色div延时消失。
下面将代码贴出:

<!DOCTYPE html>
<html>
      <head>
           <meta http-equiv="content-type" content="text/html;charset=utf-8">
           <meta name="author" content="zsh">
           <meta name="keywords" content="">
           <meta name="description" content="">
           <title>延时提示框</title>
           <style type="text/css">
           div{float:left; margin: 10px;}
           #div1{width: 50px;height: 50px;background: red;}
           #div2{width: 200px;height: 100px;background: blue; display: none;}
           </style>
     </head>
     <body>
     <div id="div1"></div>
     <div id="div2"></div>
     </body>
     <script type="text/javascript"> 

     window.onload = function(){
      var oDiv1 = document.getElementById('div1');
      var oDiv2 = document.getElementById('div2');
      var timer = null;
      /**此函数功能:鼠标放到红色div上 蓝色div显示**/
      oDiv1.onmouseover = function(){
        clearTimeout(timer);
        //清理 oDiv2.onmouseout中的timer 
        oDiv2.style.display = 'block' ;
      }
       /**此函数功能:鼠标放从红色div上移除 蓝色div消失**/
      oDiv1.onmouseout = function(){
        timer = setTimeout(function(){
          oDiv2.style.display = 'none' ;
        },1000); 
        //延时效果:1000毫秒后 才消失
      }
      /**此函数功能:蓝色div显示出来后,鼠标放到蓝色div上 蓝色div不消失**/
      oDiv2.onmouseover = function(){
        clearTimeout(timer);
      }
      /**此函数功能:蓝色div显示出来后,鼠标从蓝色div上移除 蓝色div消失**/
      oDiv2.onmouseout = function(){
        timer = setTimeout(function(){
          oDiv2.style.display = 'none' ;
        },1000); 
      }
     }
     </script>
</html>

以上js代码可作简化处理,合并函数:

<script type="text/javascript"> 

     window.onload = function(){
      var oDiv1 = document.getElementById('div1');
      var oDiv2 = document.getElementById('div2');
      var timer = null;
      oDiv2.onmouseover = oDiv1.onmouseover = function(){
        clearTimeout(timer);
        oDiv2.style.display = 'block' ;
      }
      oDiv2.onmouseout = oDiv1.onmouseout = function(){
        timer = setTimeout(function(){
          oDiv2.style.display = 'none' ;
        },1000); 
        //延时效果:1000毫秒后 才消失
      }

     }
     </script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值