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"
});