js delay timer simule la fonction d'affichage d'informations personnelles lors du glissement de l'avatar dans QQ (code)-js tutoriel-php.cn

js delay timer simule la fonction d'affichage d'informations personnelles lors du glissement de l'avatar dans QQ (code)

不言

Libérer： 2018-08-16 14:56:00

original

1616 Les gens l'ont consulté

Le contenu de cet article concerne la fonction de simulation de retardateur js (code) qui affiche des informations personnelles lors du balayage de l'avatar dans QQ. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Principe

Utiliser les événements d'entrée et de sortie de la souris
Utiliser la minuterie pour retarder la disparition
Effacer le minuteur

Mise en œuvre du code

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

Copier après la connexion

Fusion de codes identiques et similaires

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

Copier après la connexion

Recommandations associées :

minuterie d'intervalle javascript (minuterie de retard) appel d'intervalle d'apprentissage et compétences call_javascript de retard

Boîte d'invite de retardateur JS Exemple d'application compétences d'analyse de code javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!