当前位置：首页 > JavaScript

js实现鼠标滑动

2026-03-01 05:58:43JavaScript

鼠标滑动事件的基本实现

在JavaScript中，鼠标滑动通常通过监听mousemove事件来实现。以下是一个基础示例：

document.addEventListener('mousemove', function(event) {
    console.log(`X: ${event.clientX}, Y: ${event.clientY}`);
});

获取鼠标位置信息

MouseEvent对象包含多个有用的位置属性：

js实现鼠标滑动

clientX/clientY：相对于浏览器视口的坐标
pageX/pageY：相对于整个文档的坐标
screenX/screenY：相对于屏幕的坐标

element.addEventListener('mousemove', (e) => {
    const posX = e.clientX;
    const posY = e.clientY;
    // 使用坐标值进行后续操作
});

实现元素跟随鼠标

创建一个跟随鼠标移动的元素：

js实现鼠标滑动

const follower = document.createElement('div');
follower.style.position = 'fixed';
document.body.appendChild(follower);

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

性能优化方案

对于频繁触发的mousemove事件，可以使用节流(throttle)技术优化性能：

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        if (!lastRan) {
            func.apply(this, arguments);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(() => {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(this, arguments);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

document.addEventListener('mousemove', throttle(function(e) {
    // 处理逻辑
}, 100));

高级交互示例

实现基于鼠标移动速度改变元素样式的效果：

let lastX, lastY, lastTime;
const element = document.getElementById('target');

document.addEventListener('mousemove', (e) => {
    const now = Date.now();
    const elapsed = now - (lastTime || now);

    if (lastX !== undefined && lastY !== undefined) {
        const distance = Math.sqrt(
            Math.pow(e.clientX - lastX, 2) + 
            Math.pow(e.clientY - lastY, 2)
        );
        const speed = distance / elapsed;

        element.style.transform = `scale(${1 + speed/100})`;
        element.style.opacity = Math.min(1, 1/speed);
    }

    lastX = e.clientX;
    lastY = e.clientY;
    lastTime = now;
});

兼容性注意事项

对于触摸设备，需要同时考虑touchmove事件
某些浏览器可能对高频mousemove事件有限制
使用requestAnimationFrame可以优化动画性能

let mouseX = 0, mouseY = 0;

function updateElementPosition() {
    element.style.left = `${mouseX}px`;
    element.style.top = `${mouseY}px`;
    requestAnimationFrame(updateElementPosition);
}

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

updateElementPosition();