javascript延时定时器模拟QQ划过头像显示用户信息

最新推荐文章于 2024-07-30 10:56:44 发布

weixin_33896069

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量97

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016035576

版权

原理

采用鼠标划入划出事件
利用定时器延迟消失
清除定时器

代码实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>延时定时器模拟qq划过头像显示用户信息</title>
    <style>
      div{
        float:left;
        margin:10px;
      }
      #div1{
        width: 50px;
        height:50px;
        background:red;
      }
      #div2{
        width: 250px;
        height: 180px;
        background: #ccc;
        display: none;
      }
    </style>
    <script>
      window.onload=function(){
        var oDiv1=document.getElementById("div1");
        var oDiv2=document.getElementById("div2");
        var timer=null;
        oDiv1.onmouseover=function(){
          clearTimeout(timer);
          oDiv2.style.display="block";
        }
        oDiv1.onmouseout=function(){
          timer=setTimeout(function(){
            oDiv2.style.display="none";
          },500)
        }
        oDiv2.onmouseover=function(){
          clearTimeout(timer);
        }
        oDiv2.onmouseout=function(){
          timer=setTimeout(function(){
            oDiv2.style.display="none";
          },500)
        }
      }
    </script>
  </head>
  <body>
    <div id="div1"></div>
    <div id="div2"></div>
  </body>
</html>

把相同、相似代码进行合并

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>延时定时器模拟qq划过头像显示用户信息</title>
    <style>
      div{
        float:left;
        margin:10px;
      }
      #div1{
        width: 50px;
        height:50px;
        background:red;
      }
      #div2{
        width: 250px;
        height: 180px;
        background: #ccc;
        display: none;
      }
    </style>
    <script>
      window.onload=function(){
        var oDiv1=document.getElementById("div1");
        var oDiv2=document.getElementById("div2");
        var timer=null;
        oDiv1.onmouseover=oDiv2.onmouseover=function(){
          clearTimeout(timer);
          oDiv2.style.display="block";
        }
        oDiv1.onmouseout=oDiv2.onmouseout=function(){
          timer=setTimeout(function(){
            oDiv2.style.display="none";
          },500)
        }
      }
    </script>
  </head>
  <body>
    <div id="div1"></div>
    <div id="div2"></div>
  </body>
</html>

weixin_33896069

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript延时定时器模拟QQ划过头像显示用户信息

原理采用鼠标划入划出事件利用定时器延迟消失清除定时器代码实现<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>延时定时器模拟qq划过头像显示用户信息</title>...
复制链接

扫一扫