Beispielcode-Freigabe zum Implementieren einer Umschaltverzögerung, wenn die js-Maus über die Tab-Registerkarte läuft-js-Tutorial-php.cn

Beispielcode-Freigabe zum Implementieren einer Umschaltverzögerung, wenn die js-Maus über die Tab-Registerkarte läuft

黄舟

Freigeben： 2017-03-25 14:43:05

Original

1462 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den Umschaltverzögerungseffekt von js vor, wenn die Maus über die Registerkarte fährt. Er hat einen bestimmten Referenzwert.

Ich habe ihn zufällig entdeckt Dieser Effekt tritt beim Surfen im Internet auf. Wenn die Maus versehentlich über die Registerkarte gleitet, wechselt sie nicht. Sie wechselt jedoch, wenn die Maus eine Weile darauf bleibt.

Persönlich denke ich, dass die Benutzererfahrung gut ist: 1. Wenn der Benutzer nur über die Registerkarte wischt und nicht wechseln muss und wenn für den Wechsel der Registerkarten Daten angefordert werden müssen, werden unnötige asynchrone Anforderungen auftreten vermieden; 2. Vermeiden Sie, dass die Seite wechselt und springt, wenn der Benutzer sie nicht benötigt, was sich auf die Benutzererfahrung auswirkt.

Ich habe mehrere Methoden online überprüft und festgestellt, dass die folgende Methode prägnanter und effektiver ist. Zur späteren Bezugnahme organisiert.

Der entscheidende Punkt ist der js-Code: Das Prinzip besteht darin, den Timer beim Durchlaufen des Schwebeflugs einzustellen, die Ausführung der Umschaltmethode zu verzögern und den Timer beim Verlassen zu löschen. Wenn die Schwebezeit kürzer als die Verzögerungszeit ist, wird der Timer gelöscht und die Umschaltmethode wird nicht ausgeführt. Die Umschaltung erfolgt nur, wenn die Verweilzeit größer als die Verzögerungszeit ist. Dadurch kann effektiv vermieden werden, dass die Lasche verschoben wird, um das Schaltereignis auszulösen.

Code kopieren

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe zum Implementieren einer Umschaltverzögerung, wenn die js-Maus über die Tab-Registerkarte läuft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!