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

来源：互联网发布：wifi网络测试编辑：程序博客网时间：2024/06/10 00:25

延时提示框在很多网站和软件中都有使用，比如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>

阅读全文

0 0