js 手机划屏效果

在移动开发中，实现手机划屏效果通常涉及到JavaScript与触摸事件（Touch Events）的交互。这种效果常见于图片查看器、滑动菜单、轮播图等应用场景，提升用户体验。

基础概念

触摸事件（Touch Events）：包括 touchstart、touchmove 和 touchend，用于检测用户在触摸屏设备上的触摸行为。
CSS3 过渡与动画：通过 transform 和 transition 属性实现平滑的视觉效果。
惯性滑动：模拟物理世界的惯性，使滑动结束后元素继续滑动一段距离再停止。

实现手机划屏效果的优势

提升用户体验：提供更直观、流畅的交互方式。
响应式设计：适应不同尺寸和方向的移动设备屏幕。
节省资源：相比复杂的动画，使用CSS3过渡更高效。

类型与应用场景

水平滑动：适用于轮播图、图片浏览器。
垂直滑动：适用于新闻阅读器、社交媒体滚动。
多方向滑动：适用于游戏或复杂交互界面。

示例代码

以下是一个简单的水平滑动效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机划屏效果</title>
<style>
  .slider {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }
  .slider img {
    width: 100%;
    display: inline-block;
    transition: transform 0.3s ease;
  }
</style>
</head>
<body>

<div class="slider" id="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

<script>
  const slider = document.getElementById('slider');
  let startX = 0;
  let currentTranslate = 0;
  let prevTranslate = 0;
  let animationID = 0;
  let isDragging = false;

  slider.addEventListener('touchstart', touchStart);
  slider.addEventListener('touchmove', touchMove);
  slider.addEventListener('touchend', touchEnd);

  function touchStart(event) {
    startX = event.touches[0].clientX;
    isDragging = true;
    cancelAnimationFrame(animationID);
  }

  function touchMove(event) {
    if (!isDragging) return;
    const currentX = event.touches[0].clientX;
    const diffX = currentX - startX;
    currentTranslate = prevTranslate + diffX;
    setSliderPosition();
  }

  function touchEnd() {
    isDragging = false;
    const movedBy = currentTranslate - prevTranslate;
    if (movedBy < -100 && currentTranslate > -300) {
      // Swipe left
      prevTranslate -= window.innerWidth;
    } else if (movedBy > 100 && currentTranslate < 300) {
      // Swipe right
      prevTranslate += window.innerWidth;
    }
    setSliderPosition();
    cancelAnimationFrame(animationID);
  }

  function setSliderPosition() {
    slider.style.transform = `translateX(${currentTranslate}px)`;
  }
</script>

</body>
</html>