使用 HTML + JavaScript 实现商品图片放大镜（附完整代码）

在现代电商网站中，商品图片的细节展示对于提升用户体验和促进购买决策至关重要。放大镜效果作为一种经典的商品图片展示方式，能够让用户清晰地查看商品的每一个细节。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 实现一个功能完整的商品图片放大镜效果。

效果演示

该放大镜功能主要包括以下几个交互体验：

左侧缩略图列表，支持点击切换主图

主图区域鼠标悬停时显示放大镜效果

右侧同步显示放大的局部图像

支持左右导航按钮切换图片

缩略图悬停时自动预览对应图片

用户可以通过点击缩略图或者使用导航按钮来浏览不同角度的商品图片，当鼠标移动到主图上时，会显示出一个放大镜区域，并在右侧展示对应的高清放大图像。

页面结构

整个页面采用了经典的两栏布局设计，左侧为缩略图区域，右侧为主图及放大预览区域。

缩略图区域

缩略图区域位于页面左侧，垂直排列多个小尺寸的商品图片缩略图。每个缩略图都带有边框高亮效果，当前选中的缩略图会有橙色边框标识。

<div class="thumbnails" id="thumbnailsContainer"></div>

主图与放大镜区域

主图区域占据页面右侧大部分空间，包含实际展示的商品大图、放大镜遮罩层以及放大预览窗口。

<div class="product-viewer">
  <div class="main-image-container" id="mainContainer">
    <img class="main-image" id="mainImage" src="" alt="Product Image">
    <div class="magnifier-lens" id="magnifierLens"></div>
    <button class="nav-btn prev-btn" id="prevBtn">‹</button>
    <button class="nav-btn next-btn" id="nextBtn">›</button>
  </div>
  <div class="zoom-preview" id="zoomPreview"></div>
</div>

核心功能实现

渲染缩略图

renderThumbnails() 函数负责动态生成并显示商品图片的缩略图列表。

function renderThumbnails() {
  thumbnailsContainer.innerHTML = '';
  imageData.forEach(function(image, index) {
    var thumbnail = document.createElement('div');
    thumbnail.className = 'thumbnail ' + (index === currentState.currentIndex ? 'active' : '');
    thumbnail.dataset.index = index;
    thumbnail.innerHTML = '<img src="' + image.small + '" alt="Thumbnail ' + index + '">';
    thumbnailsContainer.appendChild(thumbnail);
  });
}

更新主图

updateMainImage() 函数负责更新主图显示区域和放大预览区域的图片内容。

function updateMainImage() {
  var currentImage = imageData[currentState.currentIndex];
  mainImage.src = currentImage.small;
  zoomPreview.style.backgroundImage = 'url(' + currentImage.large + ')';
  // 等待图片加载完成后设置背景尺寸
  mainImage.onload = function() {
    setBackgroundSize();
  };
  // 如果图片已缓存，直接设置背景尺寸
  if (mainImage.complete) {
    setBackgroundSize();
  }
}

放大镜交互逻辑

放大镜的核心在于精确计算放大镜的位置和大小，并同步控制预览区域的背景位置。当鼠标进入主图容器时触发 showMagnifier() 显示放大镜和预览窗口；离开时通过 hideMagnifier() 隐藏它们。在鼠标移动过程中，moveMagnifier() 函数实时计算并更新放大镜位置及其在预览区的对应显示区域。

function moveMagnifier(e) {
  var containerRect = mainContainer.getBoundingClientRect();
  var x = e.clientX - containerRect.left;
  var y = e.clientY - containerRect.top;
  // 计算放大镜尺寸（使用整数避免小数问题）
  var lensWidth = Math.floor(mainContainer.offsetWidth / currentState.zoomFactor);
  var lensHeight = Math.floor(mainContainer.offsetHeight / currentState.zoomFactor);
  // 计算放大镜位置（先计算中心点，再确定左上角位置）
  var lensX = Math.round(x - lensWidth / 2);
  var lensY = Math.round(y - lensHeight / 2);
  // 严格的边界限制（确保右边界和下边界也不会超出）
  lensX = Math.max(0, Math.min(lensX, containerRect.width - lensWidth));
  lensY = Math.max(0, Math.min(lensY, containerRect.height - lensHeight));
  // 设置放大镜位置和尺寸
  magnifierLens.style.left = lensX + 'px';
  magnifierLens.style.top = lensY + 'px';
  magnifierLens.style.width = lensWidth + 'px';
  magnifierLens.style.height = lensHeight + 'px';
  // 计算预览区域背景位置
  var percentX = x / containerRect.width;
  var percentY = y / containerRect.height;
  // 获取背景总尺寸
  var bgWidth = mainContainer.offsetWidth * currentState.zoomFactor;
  var bgHeight = mainContainer.offsetHeight * currentState.zoomFactor;
  // 计算预览区域可视窗口尺寸
  var previewWidth = zoomPreview.offsetWidth;
  var previewHeight = zoomPreview.offsetHeight;
  // 计算背景位置，使鼠标位置居中显示
  var previewBgX = -(percentX * bgWidth - previewWidth / 2);
  var previewBgY = -(percentY * bgHeight - previewHeight / 2);
  // 限制背景位置，避免显示空白区域
  if (bgWidth <= previewWidth) {
    previewBgX = (previewWidth - bgWidth) / 2;
  } else {
    previewBgX = Math.max(previewWidth - bgWidth, Math.min(0, previewBgX));
  }
  if (bgHeight <= previewHeight) {
    previewBgY = (previewHeight - bgHeight) / 2;
  } else {
    previewBgY = Math.max(previewHeight - bgHeight, Math.min(0, previewBgY));
  }
  zoomPreview.style.backgroundPosition = previewBgX + 'px ' + previewBgY + 'px';
}