当前位置：首页 > JavaScript

js鼠标事件实现动效

2026-01-31 08:56:43JavaScript

鼠标事件基础

在JavaScript中，常见的鼠标事件包括click、mouseover、mouseout、mousemove、mousedown和mouseup。通过监听这些事件，可以触发不同的动效。

element.addEventListener('mouseover', () => {
  element.style.transform = 'scale(1.1)';
});

鼠标悬停缩放效果

通过mouseover和mouseout事件实现悬停缩放效果。结合CSS的transition属性使动画更平滑。

const box = document.querySelector('.box');
box.addEventListener('mouseover', () => {
  box.style.transform = 'scale(1.2)';
  box.style.transition = 'transform 0.3s ease';
});
box.addEventListener('mouseout', () => {
  box.style.transform = 'scale(1)';
});

鼠标移动跟随效果

利用mousemove事件获取鼠标位置，动态调整元素的位置或样式。

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

鼠标点击涟漪效果

通过mousedown事件触发涟漪动画，动态创建元素并添加CSS动画。

js鼠标事件实现动效

const button = document.querySelector('.ripple-button');
button.addEventListener('mousedown', (e) => {
  const ripple = document.createElement('span');
  ripple.classList.add('ripple');
  ripple.style.left = `${e.offsetX}px`;
  ripple.style.top = `${e.offsetY}px`;
  button.appendChild(ripple);
  setTimeout(() => ripple.remove(), 600);
});

鼠标拖拽效果

结合mousedown、mousemove和mouseup事件实现拖拽功能。

const draggable = document.querySelector('.draggable');
let isDragging = false;
let offsetX, offsetY;

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

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

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

鼠标悬停颜色渐变

通过mouseover和mouseout事件结合CSS渐变实现颜色过渡。

const card = document.querySelector('.card');
card.addEventListener('mouseover', () => {
  card.style.background = 'linear-gradient(to right, #ff7e5f, #feb47b)';
});
card.addEventListener('mouseout', () => {
  card.style.background = 'linear-gradient(to right, #feb47b, #ff7e5f)';
});

鼠标悬停3D翻转

利用CSS的transform和perspective属性，结合鼠标事件实现3D翻转效果。

js鼠标事件实现动效

const flipCard = document.querySelector('.flip-card');
flipCard.addEventListener('mouseover', () => {
  flipCard.style.transform = 'rotateY(180deg)';
  flipCard.style.transition = 'transform 0.6s';
});
flipCard.addEventListener('mouseout', () => {
  flipCard.style.transform = 'rotateY(0deg)';
});

鼠标移动视差效果

通过mousemove事件计算鼠标位置，调整不同图层的移动速度，实现视差效果。

document.addEventListener('mousemove', (e) => {
  const parallaxLayers = document.querySelectorAll('.parallax-layer');
  parallaxLayers.forEach(layer => {
    const speed = layer.getAttribute('data-speed');
    const x = (window.innerWidth - e.pageX * speed) / 100;
    const y = (window.innerHeight - e.pageY * speed) / 100;
    layer.style.transform = `translateX(${x}px) translateY(${y}px)`;
  });
});

鼠标悬停文字阴影

通过mouseover和mouseout事件动态添加或移除文字阴影效果。

const text = document.querySelector('.hover-text');
text.addEventListener('mouseover', () => {
  text.style.textShadow = '2px 2px 4px rgba(0, 0, 0, 0.5)';
});
text.addEventListener('mouseout', () => {
  text.style.textShadow = 'none';
});

鼠标悬停SVG路径动画

针对SVG元素，通过鼠标事件触发路径动画或填充变化。

const svgPath = document.querySelector('.svg-path');
svgPath.addEventListener('mouseover', () => {
  svgPath.style.strokeDashoffset = '0';
  svgPath.style.transition = 'stroke-dashoffset 1s ease-in-out';
});
svgPath.addEventListener('mouseout', () => {
  svgPath.style.strokeDashoffset = '1000';
});