Der js-Verzögerungstimer simuliert die Funktion der Anzeige persönlicher Informationen beim Wischen des Avatars in QQ (Code).-js-Tutorial-php.cn

Der js-Verzögerungstimer simuliert die Funktion der Anzeige persönlicher Informationen beim Wischen des Avatars in QQ (Code).

不言

Freigeben： 2018-08-16 14:56:00

Original

1598 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der js-Verzögerungs-Timer-Simulationsfunktion (Code), die beim Wischen des Avatars in QQ einen gewissen Referenzwert hat. Ich hoffe, es wird Ihnen helfen .

Prinzip

Verwenden Sie Ein- und Ausstreichereignisse der Maus
Verwenden Sie einen Timer, um das Verschwinden zu verzögern
Timer löschen

Code-Implementierung

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

Nach dem Login kopieren

Identische und ähnliche Codes zusammenführen

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

Nach dem Login kopieren

Verwandte Empfehlungen:

Javascript-Intervall-Timer (Verzögerungstimer) Lernen von Intervallaufrufen und Verzögerungsanrufen_Javascript-Fähigkeiten

JS-Delayer-Eingabeaufforderungsfeld-Anwendungsbeispielcode Parsing_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonDer js-Verzögerungstimer simuliert die Funktion der Anzeige persönlicher Informationen beim Wischen des Avatars in QQ (Code).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!