当前位置：首页 > JavaScript

js 实现图片放大

2026-01-16 12:03:06JavaScript

使用 CSS transform 实现图片放大

通过 CSS 的 transform: scale() 属性可以实现图片的平滑放大效果。结合 JavaScript 监听鼠标事件控制放大状态：

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

使用 Lightbox 库实现模态框放大

引入成熟的 Lightbox 库如 lightgallery.js 可以实现专业级的图片放大展示：

// 安装后引入
import lightGallery from 'lightgallery';

document.addEventListener('DOMContentLoaded', () => {
  lightGallery(document.getElementById('gallery-container'));
});

原生 JavaScript 实现点击放大

通过动态创建 overlay 元素实现全屏放大效果：

document.querySelectorAll('.zoomable-img').forEach(img => {
  img.onclick = function() {
    const overlay = document.createElement('div');
    overlay.style.position = 'fixed';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100vw';
    overlay.style.height = '100vh';
    overlay.style.backgroundColor = 'rgba(0,0,0,0.8)';
    overlay.style.zIndex = '1000';
    overlay.style.display = 'flex';
    overlay.style.justifyContent = 'center';
    overlay.style.alignItems = 'center';

    const clonedImg = this.cloneNode();
    clonedImg.style.maxHeight = '90vh';
    clonedImg.style.maxWidth = '90vw';

    overlay.appendChild(clonedImg);
    overlay.onclick = () => document.body.removeChild(overlay);

    document.body.appendChild(overlay);
  };
});

使用 Canvas 实现像素级放大

对于需要显示放大细节的场景，可以通过 Canvas 实现局部放大镜效果：

function createMagnifier(img, zoomLevel = 2) {
  const canvas = document.createElement('canvas');
  canvas.width = 200;
  canvas.height = 200;
  canvas.style.position = 'absolute';
  canvas.style.border = '1px solid #000';
  canvas.style.display = 'none';

  img.parentNode.appendChild(canvas);

  img.addEventListener('mousemove', (e) => {
    canvas.style.display = 'block';
    canvas.style.left = `${e.pageX + 10}px`;
    canvas.style.top = `${e.pageY + 10}px`;

    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(
      img,
      e.offsetX - canvas.width/(2*zoomLevel),
      e.offsetY - canvas.height/(2*zoomLevel),
      canvas.width/zoomLevel,
      canvas.height/zoomLevel,
      0,
      0,
      canvas.width,
      canvas.height
    );
  });

  img.addEventListener('mouseout', () => {
    canvas.style.display = 'none';
  });
}

响应式图片放大方案

针对不同设备实现响应式放大处理：

function responsiveZoom(imgElement) {
  const isMobile = window.matchMedia('(max-width: 768px)').matches;
  const scaleValue = isMobile ? 1.5 : 2;

  imgElement.addEventListener('click', () => {
    if(imgElement.classList.contains('zoomed')) {
      imgElement.style.transform = 'scale(1)';
    } else {
      imgElement.style.transform = `scale(${scaleValue})`;
    }
    imgElement.classList.toggle('zoomed');
  });
}

js 实现图片放大