当前位置：首页 > JavaScript

js实现滑动效果

2026-04-04 06:42:21JavaScript

使用CSS Transition实现滑动效果

通过CSS的transition属性结合JavaScript修改样式属性实现平滑滑动效果。这种方法适用于简单的滑动动画，性能较好。

// HTML结构
<div id="slider" style="transition: transform 0.3s ease;"></div>

// JavaScript代码
const slider = document.getElementById('slider');
slider.style.transform = 'translateX(100px)'; // 向右滑动100px

使用requestAnimationFrame实现自定义动画

需要更精细控制动画过程时，可以使用requestAnimationFrame实现高性能的滑动效果。

function slide(element, distance, duration) {
  const start = performance.now();
  const startPos = element.getBoundingClientRect().left;

  function animate(currentTime) {
    const elapsed = currentTime - start;
    const progress = Math.min(elapsed / duration, 1);
    element.style.transform = `translateX(${startPos + distance * progress}px)`;

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

// 使用示例
slide(document.getElementById('slider'), 200, 500); // 滑动200px，耗时500ms

使用Web Animations API

现代浏览器支持的Web Animations API提供了更强大的动画控制能力。

js实现滑动效果

const element = document.getElementById('slider');
element.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(200px)' }
], {
  duration: 1000,
  easing: 'ease-in-out',
  fill: 'forwards'
});

实现横向滑动轮播

结合事件监听实现交互式滑动效果，适用于轮播图等场景。

const carousel = document.querySelector('.carousel');
let isDragging = false;
let startX;
let currentTranslate = 0;
let prevTranslate = 0;

carousel.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  carousel.style.cursor = 'grabbing';
});

carousel.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const currentX = e.clientX;
  const diff = currentX - startX;
  currentTranslate = prevTranslate + diff;
  carousel.style.transform = `translateX(${currentTranslate}px)`;
});

carousel.addEventListener('mouseup', () => {
  isDragging = false;
  prevTranslate = currentTranslate;
  carousel.style.cursor = 'grab';
});

carousel.addEventListener('mouseleave', () => {
  isDragging = false;
});

使用第三方库实现复杂滑动

对于更复杂的滑动需求，可以考虑使用专门的运动库：

js实现滑动效果

GSAP：提供高性能的动画控制
```
gsap.to(".box", {x: 100, duration: 1});
```

Swiper.js：专为滑动轮播设计的库

const swiper = new Swiper('.swiper', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
 el: '.swiper-pagination',
 clickable: true,
},
navigation: {
 nextEl: '.swiper-button-next',
 prevEl: '.swiper-button-prev',
},
});

移动端触摸滑动实现

针对移动设备添加触摸事件支持：

const slider = document.getElementById('slider');
let touchStartX = 0;
let touchEndX = 0;

slider.addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
});

slider.addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
});

function handleSwipe() {
  if (touchEndX < touchStartX) {
    // 向左滑动
    slider.style.transform = 'translateX(-100px)';
  }
  if (touchEndX > touchStartX) {
    // 向右滑动
    slider.style.transform = 'translateX(100px)';
  }
}