JQuery-Slide-Methode-Front-End-Fragen und Antworten-php.cn

JQuery-Slide-Methode

WBOY

Freigeben： 2023-05-24 22:43:37

Original

577 Leute haben es durchsucht

jQuery ist eine sehr beliebte Javascript-Bibliothek, die eine große Anzahl von Hilfsfunktionen und -methoden enthält, die uns die Manipulation von HTML- und CSS-Elementen erleichtern. In diesem Artikel stellen wir vor, wie man die Sliding-Methode mit jQuery implementiert.

Einführung

Sliding ist eine gängige Benutzerinteraktionsaktion, die es Benutzern ermöglicht, Elemente auf der Seite zu ziehen und in manchen Situationen erforderlich sein kann. Im Karussellbild hoffen wir beispielsweise, dass der Benutzer durch Gesten zum nächsten oder vorherigen Bild wechseln kann. Daher müssen wir eine Gleitmethode implementieren, um dies zu erreichen.

Gestenerkennung

Bevor wir die Gleitmethode implementieren, müssen wir zunächst eine Gestenerkennung durchführen, um festzustellen, ob der Benutzer horizontal oder vertikal gleitet. In jQuery können wir Ereignisse wie mousedown, mousemove und mouseup verwenden, um die Gestenerkennung zu implementieren. Der spezifische Code lautet wie folgt: 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';
  }
}

Nach dem Login kopieren

在上面的代码中，我们通过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>

Nach dem Login kopieren

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

Im obigen Code zeichnen wir die Koordinaten auf, an denen der Benutzer beginnt, die Geste durch das Ereignis mousedown auszulösen, und zeichnen dann das Ende des Gleitens des Benutzers durch auf mousemove-Ereigniskoordinaten können wir die Funktion swipeDirection verwenden, um zu bestimmen, ob der Benutzer in horizontaler oder vertikaler Richtung gewischt hat. Schließlich verwenden wir das Ereignis mouseup, um die Koordinaten aufzuzeichnen, wenn die Geste endet.

Implementieren Sie die Gleitmethode

Nachdem wir die Gestenerkennung durchgeführt haben, können wir die Gleitmethode implementieren. Im folgenden Beispiel verwenden wir die Methode animate von jQuery, um eine sanfte Gleitanimation zu implementieren, sodass das Bild der Geste folgen kann, wenn es gezogen wird.

mousedown

mousemove

mouseup

Das obige ist der detaillierte Inhalt vonJQuery-Slide-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!