当前位置：首页 > JavaScript

js实现放大

2026-03-14 09:14:57JavaScript

实现图片放大功能

通过JavaScript实现图片放大功能通常需要结合HTML和CSS。以下是几种常见的实现方式：

使用CSS transform属性

通过CSS的transform: scale()属性可以实现简单的放大效果：

function zoomIn(element, scale) {
  element.style.transform = `scale(${scale})`;
  element.style.transition = 'transform 0.3s ease';
}

鼠标悬停放大效果

实现鼠标悬停时图片放大的交互：

js实现放大

const images = document.querySelectorAll('.zoomable');
images.forEach(img => {
  img.addEventListener('mouseenter', () => {
    img.style.transform = 'scale(1.2)';
  });
  img.addEventListener('mouseleave', () => {
    img.style.transform = 'scale(1)';
  });
});

点击放大镜效果

创建类似放大镜的交互体验：

function createMagnifier(img, zoom) {
  const magnifier = document.createElement('div');
  magnifier.className = 'magnifier';
  document.body.appendChild(magnifier);

  img.addEventListener('mousemove', (e) => {
    const {left, top, width, height} = img.getBoundingClientRect();
    const x = (e.pageX - left) / width * 100;
    const y = (e.pageY - top) / height * 100;

    magnifier.style.backgroundImage = `url(${img.src})`;
    magnifier.style.backgroundSize = `${width * zoom}px ${height * zoom}px`;
    magnifier.style.backgroundPosition = `${x}% ${y}%`;
    magnifier.style.left = `${e.pageX + 20}px`;
    magnifier.style.top = `${e.pageY + 20}px`;
  });

  img.addEventListener('mouseleave', () => {
    magnifier.style.display = 'none';
  });

  img.addEventListener('mouseenter', () => {
    magnifier.style.display = 'block';
  });
}

全屏放大模式

实现点击图片全屏放大的功能：

js实现放大

function setupFullscreenZoom() {
  const images = document.querySelectorAll('.fullscreen-zoom');
  const overlay = document.createElement('div');
  overlay.className = 'zoom-overlay';

  images.forEach(img => {
    img.addEventListener('click', () => {
      const clone = img.cloneNode();
      overlay.innerHTML = '';
      overlay.appendChild(clone);
      document.body.appendChild(overlay);
      overlay.classList.add('active');
    });
  });

  overlay.addEventListener('click', () => {
    overlay.classList.remove('active');
  });
}

使用第三方库

对于更复杂的需求，可以考虑使用专门的放大库：

这些库提供了更多高级功能，如平滑过渡、触摸支持等。实现示例：

// 使用Drift库示例
new Drift(document.querySelector('.drift-demo-trigger'), {
  paneContainer: document.querySelector('.drift-demo-pane'),
  inlinePane: false
});