js实现上下动
实现元素上下移动的 JavaScript 方法
使用 CSS 动画结合 JavaScript
通过添加/移除 CSS 类控制动画效果：
.move-up-down {
animation: bounce 1s infinite alternate;
}
@keyframes bounce {
from { transform: translateY(0); }
to { transform: translateY(-20px); }
}const element = document.getElementById('target');
element.classList.add('move-up-down');
// 停止动画
element.classList.remove('move-up-down');使用 requestAnimationFrame 实现平滑动画
通过递归调用实现精确控制：
let position = 0;
let direction = 1;
const speed = 2;
function animate() {
position += speed * direction;
if (position > 50 || position < 0) direction *= -1;
element.style.transform = `translateY(${position}px)`;
requestAnimationFrame(animate);
}
animate();使用 setInterval 基础方法
适合简单的周期性移动：
let toggle = false;
setInterval(() => {
element.style.top = toggle ? '20px' : '0px';
toggle = !toggle;
}, 500);使用 GSAP 动画库（需引入库文件）
提供更强大的动画控制：
gsap.to('#target', {
y: -30,
duration: 0.5,
repeat: -1,
yoyo: true
});注意事项
- 对于性能敏感场景推荐使用 CSS 动画或 requestAnimationFrame
- 元素需要设置 position 属性为 relative/absolute/fixed
- 移动距离和速度可根据实际需求调整参数
- 清除动画时需注意取消对应的定时器或动画帧请求
