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

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

不言original: 2018-08-16 14:56:001608parcourir

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>

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>

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!

JavaScript JS 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js utilise une minuterie pour obtenir un effet de défilement transparent (implémentation du code)Article suivant：js utilise une minuterie pour obtenir un effet de défilement transparent (implémentation du code)

Articles Liés

Voir plus