Stoppen Sie, wenn die Maus in JQuery nach oben gleitet

Das Hochschieben der Maus bis zum Anschlag ist ein häufig verwendeter interaktiver Effekt in der Front-End-Entwicklung, der Benutzern ein besseres Bedienerlebnis bieten kann. Um diesen Effekt zu erzielen, ist jQuery eine sehr bequeme und schnelle Wahl.

Zunächst müssen wir die Ereignisbindungsmethode in jQuery verstehen. jQuery bietet zwei Hauptmethoden zur Ereignisbindung, nämlich die Methoden .on() und .bind(). Der Unterschied zwischen diesen beiden Methoden besteht darin, dass die Methode .on() dynamisch generierte Elemente binden kann, während die Methode .bind() nur statisch generierte Elemente binden kann.

Nehmen wir dann die .on()-Methode als Beispiel, um zu sehen, wie wir den Effekt des Stoppens erzielen, wenn die Maus nach oben gleitet.

1. Vorbereitung

Bevor wir mit der Implementierung beginnen, müssen wir einige grundlegende HTML- und CSS-Codes vorbereiten. Zuerst müssen wir einen Div-Container erstellen, dann den Inhalt platzieren, der in den Container verschoben werden soll, und dem Container und Inhalt einige grundlegende Stile hinzufügen. Der spezifische Code lautet wie folgt:

<div class="container">
    <ul class="list">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ul>
</div>

<style>
  .container{
    width: 300px;
    height: 100px;
    overflow: hidden;
    border: 1px solid #ccc;
    position: relative;
  }

  .list{
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  .list li{
    height: 20px;
    line-height: 20px;
  }
</style>

2. Um den Stoppeffekt zu erzielen, wenn die Maus nach oben gleitet

Zuerst müssen Sie die Maus-Slide-In- und Slide-Out-Ereignisse binden und dann den Start und die Pause steuern Animation in der Event-Callback-Funktion. Der spezifische Code lautet wie folgt:

var timer; // 定时器变量
var speed = 30; // 滚动速度

// 当鼠标滑入容器时，动画暂停
$('.container').on('mouseenter', function(){
  clearInterval(timer);
});

// 当鼠标离开容器时，动画继续
$('.container').on('mouseleave', function(){
  timer = setInterval(function(){
    $('.list').animate({
      marginTop: '-20px'
    }, speed, function(){
      // 动画完成时，将第一个li元素移到最后
      $(this).css({marginTop: 0}).find('li:first').appendTo(this);
    });
  }, 2000);
});

// 页面加载完成后，自动触发鼠标离开容器事件
$(document).ready(function(){
  $('.container').trigger('mouseleave');
});

Im obigen Code verwenden wir die Methoden setInterval() und clearInterval(), um die Timer-Steuerung des Scroll-Effekts zu implementieren. Wenn die Maus in den Container gleitet, wird der Timer gelöscht und die Animation angehalten. Wenn die Maus den Container verlässt, wird der Timer neu gestartet und die Animation fortgesetzt.

3. Effektoptimierung

Nachdem der obige Code fertiggestellt ist, können wir einige Optimierungen am Code vornehmen, um ihn lesbarer und wiederverwendbar zu machen.

Zunächst können wir den Animationseffekt zur einfachen Wiederverwendung in eine Funktion kapseln. Der spezifische Code lautet wie folgt:

function startRoll() {
  timer = setInterval(function(){
    $('.list').animate({
      marginTop: '-20px'
    }, speed, function(){
      $(this).css({marginTop: 0}).find('li:first').appendTo(this);
    });
  }, 2000);
}

Zweitens können wir auch eine globale Variable für den Timer festlegen, um den Timer in anderen Codes zu steuern. Der Code lautet wie folgt:

var timer = null; // 定时器变量
var speed = 30; // 滚动速度

// 当鼠标滑入容器时，动画暂停
$('.container').on('mouseenter', function(){
  clearInterval(timer);
});

// 当鼠标离开容器时，动画继续
$('.container').on('mouseleave', function(){
  startRoll();
});

// 页面加载完成后，自动触发鼠标离开容器事件
$(document).ready(function(){
  startRoll();
});

Im oben optimierten Code legen wir einen globalen variablen Timer fest, der in anderen Codes verwendet wird, um einige spezielle Anforderungen zu erfüllen. Gleichzeitig haben wir die Methode setTimeout() zur einfachen Wiederverwendung in eine Funktion namens startRoll() gekapselt.

Zusammenfassung

Anhand der obigen Code-Implementierung können wir sehen, dass es sehr bequem und schnell ist, jQuery zu verwenden, um den Stoppeffekt zu erzielen, wenn die Maus nach oben gleitet. Während des Implementierungsprozesses müssen wir die Ereignisbindungsmethode und ihre Parameter in jQuery verstehen und über Grundkenntnisse wie die Verwendung von Timern verfügen. Gleichzeitig können wir durch Codeoptimierung auch die Lesbarkeit und Wiederverwendbarkeit des Codes verbessern und die Entwicklungseffizienz weiter verbessern.

Das obige ist der detaillierte Inhalt vonStoppen Sie, wenn die Maus in JQuery nach oben gleitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!