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

最新推荐文章于 2023-06-16 15:58:08 发布

原创最新推荐文章于 2023-06-16 15:58:08 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#延时效果 #JavaScript #js延时提示

Js学习之路专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种基于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>