当前位置：首页 > JavaScript

js实现图片抖动效果

2026-03-01 08:41:03JavaScript

使用CSS动画实现图片抖动

通过CSS的@keyframes定义抖动动画，结合transform属性实现位移效果。将动画应用到图片元素上即可。

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-image {
  animation: shake 0.5s infinite;
}

<img src="image.jpg" class="shake-image">

使用JavaScript触发CSS动画

通过动态添加/移除CSS类控制抖动效果，适合需要交互触发的场景。

js实现图片抖动效果

const img = document.querySelector('img');
img.addEventListener('click', () => {
  img.classList.add('shake-image');
  setTimeout(() => img.classList.remove('shake-image'), 500);
});

纯JavaScript实现抖动

通过定时器动态修改图片位置，实现更灵活的抖动控制。

js实现图片抖动效果

function shakeImage(element, duration = 500, distance = 5) {
  const startTime = Date.now();
  const originalPosition = element.style.position || 'static';
  element.style.position = 'relative';

  function update() {
    const elapsed = Date.now() - startTime;
    if (elapsed >= duration) {
      element.style.left = '0';
      element.style.position = originalPosition;
      return;
    }

    const progress = elapsed / duration;
    const offset = Math.sin(progress * 20) * distance * (1 - progress);
    element.style.left = `${offset}px`;
    requestAnimationFrame(update);
  }

  update();
}

// 使用示例
const img = document.querySelector('img');
img.addEventListener('click', () => shakeImage(img));

使用GSAP库实现高级抖动

GreenSock Animation Platform (GSAP)提供更强大的动画控制能力。

// 引入GSAP库后
gsap.to(".shake-image", {
  x: 10,
  duration: 0.1,
  repeat: 5,
  yoyo: true,
  ease: "power1.inOut"
});

响应式抖动效果

根据设备特性调整抖动幅度，避免移动端显示问题。

function responsiveShake(element) {
  const isMobile = window.innerWidth < 768;
  const distance = isMobile ? 3 : 8;
  shakeImage(element, 600, distance);
}

每种方法适用于不同场景：CSS动画适合简单静态效果，JavaScript实现适合需要精确控制的场景，GSAP适合复杂动画序列。根据项目需求选择合适方案，注意性能优化和用户体验平衡。