当前位置：首页 > JavaScript

js实现鼠标滑动

2026-04-04 06:34:37JavaScript

鼠标滑动事件监听

通过mousemove事件监听鼠标滑动，获取实时坐标：

document.addEventListener('mousemove', (event) => {
  const x = event.clientX;
  const y = event.clientY;
  console.log(`X: ${x}, Y: ${y}`);
});

元素跟随鼠标移动

实现DOM元素跟随鼠标移动的效果：

js实现鼠标滑动

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

滑动速度计算

基于时间差计算鼠标移动速度：

let lastTime = 0;
let lastX = 0;
let lastY = 0;

document.addEventListener('mousemove', (e) => {
  const now = Date.now();
  const deltaTime = now - lastTime;
  const deltaX = e.clientX - lastX;
  const deltaY = e.clientY - lastY;

  const speedX = deltaX / deltaTime * 1000;
  const speedY = deltaY / deltaTime * 1000;

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

  console.log(`Speed: X=${speedX.toFixed(2)}px/s, Y=${speedY.toFixed(2)}px/s`);
});

滑动方向判断

判断鼠标移动的八个主要方向：

js实现鼠标滑动

let prevX = 0;
let prevY = 0;

document.addEventListener('mousemove', (e) => {
  const directionX = e.clientX > prevX ? 'right' : 'left';
  const directionY = e.clientY > prevY ? 'down' : 'up';

  prevX = e.clientX;
  prevY = e.clientY;

  console.log(`Direction: ${directionX}-${directionY}`);
});

滑动轨迹记录

记录并绘制鼠标轨迹：

const path = [];
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

document.addEventListener('mousemove', (e) => {
  path.push({ x: e.clientX, y: e.clientY });

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  path.forEach((point, i) => {
    if (i === 0) ctx.moveTo(point.x, point.y);
    else ctx.lineTo(point.x, point.y);
  });
  ctx.stroke();
});

性能优化建议

对于高频次触发的mousemove事件，建议使用节流函数控制执行频率：

function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      fn.apply(this, args);
      lastCall = now;
    }
  };
}

document.addEventListener('mousemove', throttle((e) => {
  // 处理逻辑
}, 16)); // 约60fps