当前位置：首页 > JavaScript

js实现跟随

2026-02-02 04:54:51JavaScript

实现元素跟随鼠标移动

使用JavaScript实现元素跟随鼠标移动可以通过监听鼠标移动事件并更新元素的位置来实现。以下是具体实现方法：

const follower = document.getElementById('follower');

document.addEventListener('mousemove', (e) => {
    follower.style.left = e.clientX + 'px';
    follower.style.top = e.clientY + 'px';
});

添加平滑过渡效果

为了让跟随效果更加自然，可以添加CSS过渡效果：

#follower {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    transition: transform 0.1s ease-out;
    transform: translate(-50%, -50%);
}

更新JavaScript代码使用transform实现更流畅的动画：

const follower = document.getElementById('follower');

document.addEventListener('mousemove', (e) => {
    follower.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});

实现延迟跟随效果

如果需要实现有一定延迟的跟随效果（类似尾巴效果），可以使用以下方法：

const follower = document.getElementById('follower');
let posX = 0, posY = 0;
let mouseX = 0, mouseY = 0;

document.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
});

function animate() {
    posX += (mouseX - posX) / 10;
    posY += (mouseY - posY) / 10;

    follower.style.transform = `translate(${posX}px, ${posY}px)`;

    requestAnimationFrame(animate);
}

animate();

实现多个跟随元素

如果需要实现多个元素跟随鼠标，且每个元素有不同延迟：

const followers = document.querySelectorAll('.follower');
let mouseX = 0, mouseY = 0;

document.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
});

function animate() {
    let x = mouseX;
    let y = mouseY;

    followers.forEach((follower, index) => {
        const delayFactor = (index + 1) * 5;
        x += (mouseX - x) / delayFactor;
        y += (mouseY - y) / delayFactor;

        follower.style.transform = `translate(${x}px, ${y}px)`;
    });

    requestAnimationFrame(animate);
}

animate();