当前位置：首页 > JavaScript

js实现上下动

2026-04-07 10:30:35JavaScript

实现元素上下移动的 JavaScript 方法

使用 CSS 动画结合 JavaScript 控制

通过 CSS 定义关键帧动画，JavaScript 动态添加或移除动画类。CSS 部分定义 @keyframes 上下移动效果：

@keyframes moveUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.up-down-animation {
  animation: moveUpDown 1s infinite;
}

JavaScript 部分控制动画的启停：

const element = document.getElementById('targetElement');
element.classList.add('up-down-animation');

// 停止动画
// element.classList.remove('up-down-animation');

使用 JavaScript 定时器实现

通过 setInterval 动态修改元素的 top 或 transform 属性实现周期性移动。需确保元素定位方式为 relative 或 absolute：

const element = document.getElementById('targetElement');
let position = 0;
let direction = 1;
const speed = 2;

setInterval(() => {
  position += direction * speed;
  if (Math.abs(position) >= 20) direction *= -1;
  element.style.transform = `translateY(${position}px)`;
}, 16);

使用 requestAnimationFrame 优化性能

适合需要平滑动画的场景，避免定时器可能引起的卡顿：

const element = document.getElementById('targetElement');
let position = 0;
let direction = 1;
const speed = 0.1;

function animate() {
  position += direction * speed;
  if (Math.abs(position) >= 20) direction *= -1;
  element.style.transform = `translateY(${position}px)`;
  requestAnimationFrame(animate);
}
animate();

注意事项

js实现上下动