Arrêtez-vous lorsque la souris glisse vers le haut dans jquery

Faire glisser la souris vers le haut jusqu'à l'arrêt est un effet interactif couramment utilisé dans le développement front-end, qui peut offrir aux utilisateurs une meilleure expérience de fonctionnement. Pour obtenir cet effet, jQuery est un choix très pratique et rapide.

Tout d'abord, nous devons comprendre la méthode de liaison d'événement dans jQuery. jQuery fournit deux méthodes principales de liaison d'événements, à savoir les méthodes .on() et .bind(). La différence entre ces deux méthodes est que la méthode .on() peut lier des éléments générés dynamiquement, tandis que la méthode .bind() ne peut lier que des éléments générés statiquement.

Ensuite, prenons la méthode .on() comme exemple pour voir comment obtenir l'effet d'arrêt lorsque la souris glisse vers le haut.

1. Préparation

Avant de commencer l'implémentation, nous devons préparer du code HTML et CSS de base. Tout d’abord, nous devons créer un conteneur div, puis placer le contenu qui doit être glissé dans le conteneur et ajouter quelques styles de base au conteneur et au contenu. Le code spécifique est le suivant :

<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. Pour obtenir l'effet d'arrêt lorsque la souris glisse vers le haut

Tout d'abord, vous devez lier le slide-in et le slide- de la souris. sur les événements, puis contrôlez-les dans la fonction de rappel d'événement Démarrer et mettre en pause l'animation. Le code spécifique est le suivant :

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');
});

Dans le code ci-dessus, nous utilisons les méthodes setInterval() et clearInterval() pour implémenter le contrôle par minuterie de l'effet de défilement. Lorsque la souris glisse dans le conteneur, le minuteur est effacé et l'animation est mise en pause ; lorsque la souris quitte le conteneur, le minuteur est redémarré et l'animation continue.

3. Optimisation des effets

Une fois le code ci-dessus terminé, nous pouvons apporter quelques optimisations au code pour le rendre plus lisible et réutilisable.

Tout d'abord, nous pouvons encapsuler l'effet d'animation dans une fonction pour une réutilisation facile. Le code spécifique est le suivant :

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

Deuxièmement, nous pouvons également définir une variable globale pour la minuterie afin de contrôler la minuterie dans d'autres codes. Le code est le suivant :

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

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

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

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

Dans le code optimisé ci-dessus, nous définissons une minuterie variable globale, qui sera utilisée dans d'autres codes pour répondre à certains besoins particuliers. Dans le même temps, nous avons encapsulé la méthode setTimeout() dans une fonction nommée startRoll() pour une réutilisation facile.

Résumé

Grâce à l'implémentation du code ci-dessus, nous pouvons voir qu'il est très pratique et rapide d'utiliser jQuery pour obtenir l'effet d'arrêt lorsque la souris glisse vers le haut. Au cours du processus de mise en œuvre, nous devons comprendre la méthode de liaison d'événements et ses paramètres dans jQuery, ainsi que des connaissances de base telles que l'utilisation des minuteries. Dans le même temps, nous pouvons également améliorer la lisibilité et la réutilisabilité du code grâce à l'optimisation du code, et améliorer encore l'efficacité du développement.

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!