当前位置：首页 > JavaScript

js实现滑动显示

2026-02-03 05:50:13JavaScript

实现滑动显示的基本方法

使用CSS的transition和transform属性实现平滑滑动效果。通过JavaScript动态添加或移除类名来控制元素的显示与隐藏。

.slide-element {
  transition: transform 0.3s ease;
  transform: translateX(-100%);
}

.slide-element.show {
  transform: translateX(0);
}

const element = document.querySelector('.slide-element');
element.classList.add('show'); // 显示元素
element.classList.remove('show'); // 隐藏元素

使用Intersection Observer API

Intersection Observer API可以检测元素是否进入视口，实现滚动时自动显示效果。

js实现滑动显示

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove('show');
    }
  });
});

document.querySelectorAll('.slide-element').forEach(el => {
  observer.observe(el);
});

实现横向滑动菜单

创建一个横向滑动的导航菜单，可以通过触摸或鼠标拖动。

let isDown = false;
let startX;
let scrollLeft;
const slider = document.querySelector('.slider');

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
});

slider.addEventListener('mouseup', () => {
  isDown = false;
});

slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 2;
  slider.scrollLeft = scrollLeft - walk;
});

使用GSAP实现高级动画

GSAP库提供更强大的动画控制能力，适合复杂的滑动效果。

js实现滑动显示

gsap.from(".slide-element", {
  duration: 1,
  x: -100,
  opacity: 0,
  stagger: 0.1,
  ease: "power2.out"
});

响应式滑动面板

创建一个响应式的滑动面板，可以在移动设备上通过触摸手势操作。

const panel = document.getElementById('slide-panel');
let touchStartX = 0;
let touchEndX = 0;

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

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

function handleSwipe() {
  if (touchEndX < touchStartX) {
    panel.classList.add('open');
  }
  if (touchEndX > touchStartX) {
    panel.classList.remove('open');
  }
}

实现无限循环滑动

创建一个无限循环的滑动效果，常用于轮播图或产品展示。

const slider = document.querySelector('.infinite-slider');
let currentPosition = 0;
const slideWidth = 300;
const totalSlides = document.querySelectorAll('.slide').length;

function slideNext() {
  currentPosition -= slideWidth;
  if (currentPosition <= -slideWidth * totalSlides) {
    currentPosition = 0;
  }
  slider.style.transform = `translateX(${currentPosition}px)`;
}

setInterval(slideNext, 3000);

标签: js