méthode coulissante jquery-Questions et réponses frontales-php.cn

méthode coulissante jquery

WBOY

Libérer： 2023-05-24 22:43:37

original

575 Les gens l'ont consulté

jQuery est une bibliothèque Javascript très populaire qui contient un grand nombre de fonctions et de méthodes utilitaires qui nous permettent de manipuler plus facilement les éléments HTML et CSS. Dans cet article, nous présenterons comment implémenter la méthode coulissante à l'aide de jQuery.

Introduction

Le glissement est une action d'interaction utilisateur courante qui permet aux utilisateurs de faire glisser des éléments sur la page et peut être nécessaire dans certaines situations. Par exemple, dans l'image du carrousel, nous espérons que l'utilisateur pourra passer à l'image suivante ou à l'image précédente par des gestes, nous devons donc implémenter une méthode de glissement pour y parvenir.

Reconnaissance gestuelle

Avant de mettre en œuvre la méthode de glissement, nous devons d'abord effectuer une reconnaissance gestuelle pour déterminer si l'utilisateur glisse horizontalement ou verticalement. Dans jQuery, nous pouvons utiliser des événements tels que mousedown, mousemove et mouseup pour implémenter la reconnaissance gestuelle. Le code spécifique est le suivant : mousedown、mousemove和mouseup等事件来实现手势识别。具体代码如下：

var startX, startY, endX, endY;

$(document).on('mousedown', function(e) {
  startX = e.clientX;
  startY = e.clientY;
});

$(document).on('mousemove', function(e) {
  endX = e.clientX;
  endY = e.clientY;

  var direction = swipeDirection(startX, startY, endX, endY);
});

$(document).on('mouseup', function(e) {
  endX = e.clientX;
  endY = e.clientY;

  var direction = swipeDirection(startX, startY, endX, endY);
});

function swipeDirection(startX, startY, endX, endY) {
  var diffX = Math.abs(startX - endX);
  var diffY = Math.abs(startY - endY);

  if (diffX > diffY) {
    return (startX > endX) ? 'left' : 'right';
  } else {
    return (startY > endY) ? 'up' : 'down';
  }
}

Copier après la connexion

在上面的代码中，我们通过mousedown事件记录下用户开始触发手势的坐标，然后再通过mousemove事件记录下用户滑动结束的坐标，我们可以通过swipeDirection函数判断出用户是在水平方向还是垂直方向上进行了滑动。最后，我们用mouseup事件来记录手势结束时的坐标。

实现滑动方法

在进行了手势识别后，我们就可以实现滑动方法了。在下面的例子中，我们会通过jQuery的animate方法来实现平滑的滑动动画，让图片被拖拽时能够跟随手势移动。

<!DOCTYPE html>
<html>
<head>
  <title>滑动方法示例</title>
</head>
<body>
  <div style="width: 800px; height: 400px; overflow: hidden;">
    <img id="slider" style="width: 4000px; height: 400px;" src="1.jpg, 2.jpg, 3.jpg, 4.jpg">
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var slider = $('#slider');
  var currentPos = 0; //记录当前的位置
  var sliderWidth = slider.width(); //获取图片宽度
  var len = slider.children('img').length; //获取图片数量

  //监听鼠标按下事件
  slider.on('mousedown', function(e) {
    var startX = e.pageX; //获取鼠标按下时的坐标
    var left = parseFloat(slider.css('left')); //获取初始位置
    var endX;

    //监听鼠标移动事件
    slider.on('mousemove', function(e) {
      endX = e.pageX; //获取鼠标移动时的坐标

      slider.css('left', left + endX - startX); //设置图片位置
    });

    //监听鼠标松开事件
    slider.on('mouseup', function(e) {
      $(this).off('mousemove'); //取消鼠标移动事件的监听

      var direction = swipeDirection(startX, 0, endX, 0); //判断手势方向

      if (direction === 'left' && currentPos < len - 1) {
        currentPos++; //向左滑动，图片位置加1
        slider.animate({
          left: '-=' + sliderWidth
        });
      } else if (direction === 'right' && currentPos > 0) {
        currentPos--; //向右滑动，图片位置减1
        slider.animate({
          left: '+=' + sliderWidth
        });
      } else {
        slider.animate({
          left: '-=' + (endX - startX) //回到原来的位置
        });
      }
    });

    //阻止默认事件
    e.preventDefault();
  });
</script>
</html>

Copier après la connexion

在上述代码中，我们首先使用mousedown事件来记录用户滑动图片时的坐标，然后通过mousemove事件来不断地计算图片应该跟随手指滑动的距离，最后通过mouseuprrreee

Dans le code ci-dessus, nous enregistrons les coordonnées où l'utilisateur commence à déclencher le geste via l'événement mousedown, puis enregistrons la fin du glissement de l'utilisateur à travers le Coordonnées de l'événement mousemove, nous pouvons utiliser la fonction swipeDirection pour déterminer si l'utilisateur a glissé dans le sens horizontal ou vertical. Enfin, nous utilisons l'événement mouseup pour enregistrer les coordonnées à la fin du geste.

Implémenter la méthode de glissement

Après avoir effectué la reconnaissance gestuelle, nous pouvons implémenter la méthode de glissement. Dans l'exemple suivant, nous utiliserons la méthode animate de jQuery pour implémenter une animation de glissement fluide, afin que l'image puisse suivre le geste lorsqu'elle est glissée.

mousedown

mouseup

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!