js实现div移动
使用 CSS transform 和 JavaScript 控制移动
通过修改元素的 transform 属性实现平滑移动。这种方式不会影响页面布局，适合动画效果。
const div = document.getElementById('movable-div');
let position = 0;
function moveDiv() {
position += 5;
div.style.transform = `translateX(${position}px)`;
requestAnimationFrame(moveDiv);
}
moveDiv();通过修改 left/top 定位移动
需要先将目标元素的 CSS position 设置为 absolute 或 relative，然后通过 JavaScript 动态修改坐标值。
const div = document.querySelector('.movable');
div.style.position = 'absolute';
let x = 0, y = 0;
document.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowRight': x += 10; break;
case 'ArrowLeft': x -= 10; break;
case 'ArrowUp': y -= 10; break;
case 'ArrowDown': y += 10; break;
}
div.style.left = `${x}px`;
div.style.top = `${y}px`;
});使用拖拽 API 实现自由移动
HTML5 原生支持的拖拽功能，适合需要用户手动拖动的场景。
const div = document.getElementById('draggable');
div.setAttribute('draggable', true);
div.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', 'drag-data');
});
div.addEventListener('dragend', (e) => {
div.style.left = `${e.clientX}px`;
div.style.top = `${e.clientY}px`;
});结合 CSS 动画实现自动移动
通过 JavaScript 动态添加/移除 CSS 动画类来实现复杂移动路径。
.move-animation {
animation: move 5s linear infinite;
}
@keyframes move {
0% { transform: translate(0, 0); }
50% { transform: translate(200px, 100px); }
100% { transform: translate(0, 0); }
}const div = document.getElementById('animated-div');
div.classList.add('move-animation');
// 停止动画
setTimeout(() => {
div.classList.remove('move-animation');
}, 5000);使用第三方库实现高级移动
对于复杂动画效果，可以考虑使用 GSAP 等专业动画库。
import { gsap } from 'gsap';
gsap.to("#moving-div", {
x: 300,
y: 50,
duration: 2,
ease: "bounce.out"
});
