当前位置：首页 > JavaScript

js实现图片移动

2026-01-16 12:41:09JavaScript

使用CSS和JavaScript实现图片移动

方法一：使用CSS动画结合JavaScript控制

通过CSS定义动画关键帧，JavaScript动态添加或移除动画类。

/* CSS部分 */
.move-animation {
    animation: moveRight 2s linear infinite;
}
@keyframes moveRight {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

// JavaScript部分
const img = document.getElementById('movingImage');
img.classList.add('move-animation');

// 停止动画
function stopAnimation() {
    img.classList.remove('move-animation');
}

方法二：纯JavaScript控制位置

通过定时器动态修改元素的style属性实现移动。

const img = document.getElementById('movingImage');
let position = 0;
const speed = 2;

function moveImage() {
    position += speed;
    img.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(moveImage);
}
moveImage();

方法三：使用CSS Transition

通过JavaScript修改CSS属性，配合过渡效果实现平滑移动。

/* CSS部分 */
#movingImage {
    transition: transform 0.5s ease;
}

const img = document.getElementById('movingImage');
let currentPosition = 0;

function moveRight() {
    currentPosition += 50;
    img.style.transform = `translateX(${currentPosition}px)`;
}

// 调用函数触发移动
moveRight();

方法四：拖拽实现移动

通过鼠标事件实现图片拖拽移动。

const img = document.getElementById('movingImage');
let isDragging = false;
let offsetX, offsetY;

img.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - img.getBoundingClientRect().left;
    offsetY = e.clientY - img.getBoundingClientRect().top;
});

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

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

注意事项