当前位置：首页 > JavaScript

js实现放大效果

2026-02-03 05:24:24JavaScript

使用CSS transform实现放大效果

通过CSS的transform: scale()属性结合JavaScript动态控制元素的放大效果。以下是一个基础实现示例：

const element = document.getElementById('target');
element.addEventListener('mouseenter', () => {
  element.style.transform = 'scale(1.2)';
  element.style.transition = 'transform 0.3s ease';
});
element.addEventListener('mouseleave', () => {
  element.style.transform = 'scale(1)';
});

使用CSS动画实现平滑放大

通过定义CSS动画并利用JavaScript触发动画类：

js实现放大效果

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}
.zoom-effect {
  animation: zoom 0.5s forwards;
}

document.querySelector('.box').addEventListener('click', function() {
  this.classList.add('zoom-effect');
  setTimeout(() => this.classList.remove('zoom-effect'), 500);
});

使用Web Animations API实现

现代浏览器支持的Web Animations API提供更精细的控制：

const target = document.getElementById('animated');
target.addEventListener('click', () => {
  target.animate([
    { transform: 'scale(1)' },
    { transform: 'scale(1.8)' }
  ], {
    duration: 800,
    easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
  });
});

实现图片悬停放大效果

针对图片元素的悬停放大效果，保持宽高比不变：

js实现放大效果

const images = document.querySelectorAll('.zoomable-img');
images.forEach(img => {
  img.addEventListener('mousemove', (e) => {
    const { left, top, width, height } = img.getBoundingClientRect();
    const x = (e.clientX - left) / width * 100;
    const y = (e.clientY - top) / height * 100;
    img.style.transformOrigin = `${x}% ${y}%`;
    img.style.transform = 'scale(2)';
  });
  img.addEventListener('mouseleave', () => {
    img.style.transform = 'scale(1)';
  });
});

实现点击聚焦放大效果

创建点击后保持放大状态的效果：

document.addEventListener('click', function(e) {
  const zoomer = document.createElement('div');
  zoomer.className = 'zoom-overlay';
  zoomer.style.transform = `scale(1.5)`;
  zoomer.style.left = `${e.clientX}px`;
  zoomer.style.top = `${e.clientY}px`;
  document.body.appendChild(zoomer);

  setTimeout(() => {
    zoomer.style.opacity = '0';
    setTimeout(() => zoomer.remove(), 300);
  }, 1000);
});

使用第三方库实现高级效果

使用zoom.js等专门库快速实现复杂效果：

import Zoom from 'zoom.js';
new Zoom({
  callback: function(target) {
    target.style.boxShadow = '0 0 20px rgba(0,0,0,0.3)';
  },
  scaleBase: 1.5
}).listen('.zoomable');

每个实现方式适用于不同场景，CSS transform方案性能最佳，Web Animations API提供最精细控制，而第三方库则能快速实现复杂交互效果。根据项目需求选择合适的方法，注意在移动端设备上添加适当的触摸事件支持。