Explication détaillée de la méthode de mise en œuvre de la boîte d'invite de retard JS

Cet article présente principalement la méthode d'implémentation de la boîte d'invite de délai JS et analyse le principe et les étapes spécifiques d'implémentation de JavaScript pour implémenter la fonction d'invite de délai sous forme d'exemples. Il a une certaine valeur de référence à laquelle les amis dans le besoin peuvent se référer.

Fonction de boîte d'invite : lorsque la souris pointe sur l'avatar, une boîte d'informations apparaît. La souris peut être déplacée vers la boîte d'informations. Lorsque la souris quitte l'avatar, la boîte d'informations disparaît. la souris quitte la boîte d'information, la boîte d'information disparaît.

Idées de fonctions :

1. Obtenez des éléments.
2. Lorsque la souris pointe sur p1, p2 s'affiche.
3. Lorsque la souris quitte p1, faites disparaître p2 avec un délai de 0,5 seconde, afin d'avoir le temps de déplacer la souris vers p2.
4. Lorsque la souris pointe sur p2, p2 s'affiche. Étant donné que setTimeout est défini à l'étape 3 pour faire disparaître p2, p2 peut être affiché en effaçant setTimeout avec clearTimeout().
5. Lorsque la souris quitte p2, faites disparaître p2 avec un délai de 0,5 seconde, pour avoir le temps de pointer la souris sur p1.
6. À l'étape 2, le pointeur de la souris a été défini sur p1 et p2 sera affiché. Cependant, puisque setTimeout est défini à l'étape 5 pour faire disparaître p2, donc à l'étape 2, clearTimeout() est ajouté pour effacer. setTimeout pour afficher p2.

Code JS :

<script>
window.onload=function()
{
  var op1=document.getElementById(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
  op2.onmouseover=function()
  {
    clearTimeout(time);
  };
  op2.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
};
</script>

Le code étant similaire, il peut être simplifié comme suit :

<script>
window.onload=function()
{
  var op1=document.getElementById(&#39;p1&#39;);
  var op2=document.getElementById(&#39;p2&#39;);
  time=null;
  op2.onmouseover=op1.onmouseover=function()
  {
    clearTimeout(time);
    op2.style.display=&#39;block&#39;;  
  };
  op2.onmouseout=op1.onmouseout=function()
  {
    time=setTimeout(function(){
      op2.style.display=&#39;none&#39;;
    },500);
  };
};
</script>

Code HTML, CSS :

<p id="p1"></p>
<p id="p2"></p>
<style>
#p1{float:left;margin-right:10px;width:50px;height:50px;background:black;}
#p2{display:none;float:left;width:200px;height:200px;background:#0CF;}
</style>

【Tutoriels associés recommandés】

1.Tutoriel vidéo JavaScript
2 Manuel en ligne JavaScript
3. . Tutoriel bootstrap