Maison >interface Web >js tutoriel >Exemple de partage de code pour implémenter un délai de commutation lorsque la souris js passe par l'onglet onglet

Exemple de partage de code pour implémenter un délai de commutation lorsque la souris js passe par l'onglet onglet

黄舟original: 2017-03-25 14:43:051429parcourir

Cet article présente principalement en détail l'effet de délai de commutation de js lorsque la souris passe sur l'onglet. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

J'ai découvert par hasard. cet effet lors de la navigation sur le Web. Lorsque la souris glisse sur l'onglet par inadvertance, elle ne basculera pas lorsque la souris restera dessus pendant un certain temps.

Personnellement, je pense que l'expérience utilisateur est bonne. Les avantages sont : 1. Lorsque l'utilisateur glisse simplement sur l'onglet et n'a pas besoin de changer d'onglet, et si le changement d'onglet nécessite de demander des données, des requêtes asynchrones inutiles seront évité ; 2. Éviter La page change et saute lorsque l'utilisateur n'en a pas besoin, affectant l'expérience utilisateur.

J'ai vérifié plusieurs méthodes en ligne et j'ai trouvé que la méthode suivante est plus concise et efficace. Organisé pour référence future.

Le point clé est ce code js : le principe est de régler le timer lors du passage en survol, de retarder l'exécution de la méthode de commutation, et d'effacer le timer en partant. Lorsque le temps de survol est inférieur au temps de retard, la minuterie sera effacée et la méthode de commutation ne sera pas exécutée. La commutation ne se produira que lorsque le temps de maintien sera supérieur au temps de retard. Cela peut effectivement éviter de faire glisser la languette pour déclencher l'événement de commutation .

Copier le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery.1.11.3.min.js"></script>
    <script>
      $(function() {
        var t_li = $(".tab")
        var c_li = $(".tab-content p")
        t_li.hover(function() {
          var i = t_li.index($(this));

          function way() {
            t_li.removeClass("cur").eq(i).addClass("cur");
            c_li.hide().eq(i).show();
          }
          timer = setTimeout(way, 500);
        }, function() {
          clearTimeout(timer);
        });
      });
    </script>
    <style>
      .head {
        width: 300px;
        height: 50px;
        border: 1px dashed #ccc;
      }
      
      .tab {
        width: 50%;
        float: left;
        line-height: 50px;
        cursor: pointer;
      }
      
      .cur {
        border-bottom: 2px solid red;
      }
    </style>
  </head>
  <body>
    <p style="width: 300px;margin-left: 300px;" class="main">
      <p class="head">
        <p class="tab cur">tab1</p>
        <p class="tab">tab2</p>
      </p>
      <p class="tab-content">
        <p>tab1的内容<br>tab1的内容<br>tab1的内容<br></p>
        <p style="display: none;">tab2的内容<br>tab2的内容<br>tab2的内容<br></p>
      </p>
    </p>
  </body>

</html>

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!

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：Une brève introduction pour démarrer avec Node.js et Express (images et texte)Article suivant：Une brève introduction pour démarrer avec Node.js et Express (images et texte)

Articles Liés

Voir plus