JS如何实现左右滑动

JS 实现左右滑动：通过监听触摸事件，捕获手指移动方向和距离，对 DOM 元素进行变换。具体步骤如下：添加触摸事件监听器记录手指初始位置（touchstart）计算手指移动距离（touchmove）判断滑动方向和距离（touchend）根据滑动方向和距离进行 DOM 元素变换

JS 实现左右滑动

原理：

JS 实现左右滑动主要通过监听触摸事件，获取手指的滑动方向和距离，并对 DOM 元素进行相应的变换。

步骤：

1. 添加触摸事件监听器：

   element.addEventListener("touchstart", startTouch, false);
   element.addEventListener("touchmove", moveTouch, false);
   element.addEventListener("touchend", endTouch, false);

   登录后复制

2. 在 touchstart 事件中记录手指初始位置：

   function startTouch(e) {
     startX = e.touches[0].clientX;
     startY = e.touches[0].clientY;
   }

   登录后复制

3. 在 touchmove 事件中计算手指移动距离：

   function moveTouch(e) {
     moveX = e.touches[0].clientX - startX;
     moveY = e.touches[0].clientY - startY;
   }

   登录后复制

4. 在 touchend 事件中判断滑动方向和距离：

   function endTouch(e) {
     if (Math.abs(moveX) > Math.abs(moveY)) {
    // 水平滑动
    if (moveX > 0) {
      // 右滑
      ...
    } else {
      // 左滑
      ...
    }
     } else {
    // 垂直滑动
    if (moveY > 0) {
      // 下滑
      ...
    } else {
      // 上滑
      ...
    }
     }
   }

   登录后复制

5. 根据滑动方向和距离进行 DOM 元素变换：

   if (moveX > 0) {
     // 右滑
     element.style.transform = "translateX(-100px)";
   } else {
     // 左滑
     element.style.transform = "translateX(100px)";
   }

   登录后复制

示例：

const element = document.getElementById("my-element");

element.addEventListener("touchstart", (e) => {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

element.addEventListener("touchmove", (e) => {
  moveX = e.touches[0].clientX - startX;
  moveY = e.touches[0].clientY - startY;
});

element.addEventListener("touchend", (e) => {
  if (Math.abs(moveX) > Math.abs(moveY)) {
    if (moveX > 0) {
      // 右滑
      element.style.transform = "translateX(-100px)";
    } else {
      // 左滑
      element.style.transform = "translateX(100px)";
    }
  }
});

以上就是JS如何实现左右滑动的详细内容，更多请关注php中文网其它相关文章！