jquery 滑動方法-前端問答-PHP中文網

jquery 滑動方法

WBOY

發布： 2023-05-24 22:43:37

原創

571 人瀏覽過

jQuery是一種非常受歡迎的Javascript函式庫，它包含了大量的實用工具函數和方法，使得我們可以更輕鬆地操作HTML和CSS元素。在這篇文章中，我們將介紹如何使用jQuery來實作滑動方法。

簡介

滑動是一個常見的使用者互動動作，它允許使用者在頁面上拖曳元素，並且在某些情況下可能需要用到。例如在輪播圖中，我們希望使用者能夠透過手勢來切換到下一張圖片或上一張圖片，那麼就需要實作一個滑動方法來實現。

手勢識別

在實現滑動方法之前，我們需要先進行手勢識別，判斷使用者是在水平方向或垂直方向上滑動。在jQuery中，我們可以使用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';
  }
}

登入後複製

在上面的程式碼中，我們透過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>

登入後複製

在上述程式碼中，我們首先使用mousedown事件來記錄使用者滑動圖片時的座標，然後透過mousemove事件來不斷地計算圖片應該跟隨手指滑動的距離，最後透過mouseup事件來判斷使用者滑動的方向，並進行平滑的滑動動畫。