当前位置：首页 > JavaScript

js鼠标事件实现动效

2026-03-02 00:07:23JavaScript

鼠标事件基础

鼠标事件包括click、mouseover、mouseout、mousemove、mousedown、mouseup等。通过监听这些事件，可以触发对应的动效。

element.addEventListener('mouseover', () => {
  // 动效逻辑
});

常见动效实现方式

CSS过渡配合事件 通过添加/移除类名触发CSS过渡效果：

element.addEventListener('mouseenter', () => {
  element.classList.add('hover-effect');
});
element.addEventListener('mouseleave', () => {
  element.classList.remove('hover-effect');
});

对应CSS：

.hover-effect {
  transition: transform 0.3s;
  transform: scale(1.1);
}

GSAP动画库 实现更复杂的动画序列：

element.addEventListener('click', () => {
  gsap.to(element, {
    duration: 0.5,
    x: 100,
    rotation: 360,
    ease: "bounce.out"
  });
});

拖拽动效实现

结合mousedown、mousemove和mouseup实现拖拽：

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

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

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

鼠标跟随效果

利用mousemove事件获取坐标：

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

性能优化建议

使用requestAnimationFrame替代直接样式修改
对高频事件（如mousemove）进行节流
硬件加速：使用transform和opacity属性
避免在事件回调中进行复杂DOM操作

function throttle(callback, limit) {
  let waiting = false;
  return function() {
    if (!waiting) {
      callback.apply(this, arguments);
      waiting = true;
      setTimeout(() => {
        waiting = false;
      }, limit);
    }
  }
}

高级交互示例

实现元素磁吸效果：

js鼠标事件实现动效

element.addEventListener('mousemove', (e) => {
  const rect = element.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  const distance = Math.sqrt(x*x + y*y);
  if (distance < 100) {
    gsap.to(element, {
      x: (x - rect.width/2) * 0.2,
      y: (y - rect.height/2) * 0.2,
      duration: 0.5
    });
  }
});