当前位置：首页 > JavaScript

js实现移动

2026-01-31 20:54:31JavaScript

使用 CSS `transform` 和 `transition` 实现平滑移动

通过修改元素的 transform 属性实现移动，结合 transition 添加动画效果。

const element = document.getElementById('target');
element.style.transition = 'transform 0.3s ease'; // 设置动画效果
element.style.transform = 'translateX(100px)';    // 向右移动 100px

通过修改 `left`/`top` 实现绝对定位移动

需确保目标元素为 position: absolute 或 position: relative。

const element = document.getElementById('target');
element.style.position = 'absolute';
element.style.left = '200px'; // 水平移动
element.style.top = '50px';   // 垂直移动

使用 `requestAnimationFrame` 实现高性能动画

适合复杂动画场景，逐帧控制移动过程。

let position = 0;
function move() {
  const element = document.getElementById('target');
  position += 2;
  element.style.transform = `translateX(${position}px)`;
  if (position < 300) requestAnimationFrame(move);
}
requestAnimationFrame(move);

监听事件触发移动（如拖拽）

结合 mousedown、mousemove 和 mouseup 实现拖拽效果。

const element = document.getElementById('target');
let isDragging = false;

element.addEventListener('mousedown', () => {
  isDragging = true;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  element.style.left = `${e.clientX}px`;
  element.style.top = `${e.clientY}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

使用 CSS 动画（`@keyframes`）

通过 JavaScript 动态添加 CSS 动画类。

const element = document.getElementById('target');
element.classList.add('move-animation');

// CSS 部分需提前定义
/*
.move-animation {
  animation: move 2s forwards;
}
@keyframes move {
  to { transform: translateX(100px); }
}
*/