当前位置：首页 > JavaScript

js实现滑动

2026-01-15 15:03:31JavaScript

实现滑动效果的方法

在JavaScript中实现滑动效果可以通过多种方式完成，以下是几种常见的实现方法：

使用CSS过渡和JavaScript触发

通过CSS定义过渡效果，JavaScript控制触发时机。这种方法适用于简单的滑动动画。

js实现滑动

.slide-element {
  transition: transform 0.3s ease;
}

const element = document.querySelector('.slide-element');
element.style.transform = 'translateX(100px)';

使用requestAnimationFrame实现平滑动画

requestAnimationFrame提供更流畅的动画效果，适合需要精细控制的滑动动画。

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

  function animate(currentTime) {
    const elapsed = currentTime - start;
    const progress = Math.min(elapsed / duration, 1);
    const currentDistance = distance * progress;

    element.style.transform = `translateX(${currentDistance}px)`;

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

  requestAnimationFrame(animate);
}

使用Web Animations API

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

js实现滑动

const element = document.querySelector('.slide-element');
element.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(200px)' }
], {
  duration: 500,
  easing: 'ease-in-out'
});

实现触摸滑动

对于移动端，需要处理touch事件来实现滑动交互。

let startX, currentX;
const slider = document.querySelector('.slider');

slider.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

slider.addEventListener('touchmove', (e) => {
  currentX = e.touches[0].clientX;
  const diff = currentX - startX;
  slider.style.transform = `translateX(${diff}px)`;
});

slider.addEventListener('touchend', () => {
  // 添加滑动结束后的逻辑
});

使用第三方库

对于复杂的滑动需求，可以考虑使用成熟的库如Swiper.js或Hammer.js。

// 使用Swiper.js示例
const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 30,
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});