search

Home >Web Front-end >JS Tutorial >js delay timer simulates the function of displaying personal information when swiping the avatar in QQ (code)

js delay timer simulates the function of displaying personal information when swiping the avatar in QQ (code)

不言
不言Original
2018-08-16 14:56:001660browse

The content of this article is about the js delay timer simulation function (code) that displays personal information when swiping the avatar in QQ. It has certain reference value. Friends in need can refer to it. I hope It will help you.

Principle

  • Use mouse stroke-in and stroke-out events

  • Use timer to delay disappearance

  • Clear timer

Code implementation

<!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>

Merging identical and similar codes

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

Related recommendations:

javascript interval timer (delay timer) learning interval call and delay call_javascript skills

Application example code of JS delay prompt box Parsing_javascript skills


#

The above is the detailed content of js delay timer simulates the function of displaying personal information when swiping the avatar in QQ (code). For more information, please follow other related articles on the PHP Chinese website!

JavaScript JS 事件
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js uses timer to achieve seamless scrolling effect (code implementation)Next article：js uses timer to achieve seamless scrolling effect (code implementation)

Related articles

See more