HTML中如何基于W3Schools放大镜代码同步放大4张图片同一区域？

当然可以实现！我会基于你提到的放大镜逻辑，帮你改造出能同时放大4张图片同一区域的效果，方便对比。

核心思路 #

我们需要让所有放大镜同步跟随鼠标位置，并且每个放大镜只对应自己的图片区域，这样鼠标移动时，4张图片的同一位置都会被放大显示。

步骤1：HTML结构搭建 #

先把4张图片放在一个容器里，每张图片都配上自己的放大镜元素：

<div class="image-group">
  <div class="magnifier-container">
    <img id="img1" src="your-image-1.jpg" alt="图片1">
    <div id="glass1" class="magnifier-glass"></div>
  </div>
  <div class="magnifier-container">
    <img id="img2" src="your-image-2.jpg" alt="图片2">
    <div id="glass2" class="magnifier-glass"></div>
  </div>
  <div class="magnifier-container">
    <img id="img3" src="your-image-3.jpg" alt="图片3">
    <div id="glass3" class="magnifier-glass"></div>
  </div>
  <div class="magnifier-container">
    <img id="img4" src="your-image-4.jpg" alt="图片4">
    <div id="glass4" class="magnifier-glass"></div>
  </div>
</div>

步骤2：CSS样式调整 #

让图片并排显示，同时设置放大镜的基础样式：

.image-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px;
}

.magnifier-container {
  position: relative;
  /* 可以设置固定宽度，确保图片大小一致，对比更准确 */
  width: 300px;
  height: auto;
}

.magnifier-container img {
  width: 100%;
  height: auto;
  display: block;
}

.magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  cursor: crosshair;
  /* 隐藏放大镜，初始化后再显示 */
  display: none;
  background-repeat: no-repeat;
  background-size: 600% 600%; /* 放大倍数，可根据需求调整 */
}

步骤3：JavaScript逻辑改造 #

原来的代码是单图片的，我们要改成批量初始化+同步鼠标跟踪：

// 定义放大镜配置
const magnifierConfig = {
  zoom: 6, // 放大倍数，对应CSS里的background-size比例
  glassSize: 100
};

// 初始化所有放大镜
function initMagnifiers() {
  const containers = document.querySelectorAll('.magnifier-container');
  
  containers.forEach(container => {
    const img = container.querySelector('img');
    const glass = container.querySelector('.magnifier-glass');
    
    // 设置放大镜的背景图为当前图片
    glass.style.backgroundImage = `url('${img.src}')`;
    glass.style.display = 'block';
    
    // 给容器绑定鼠标事件
    container.addEventListener('mousemove', (e) => moveMagnifier(e, img, glass));
    container.addEventListener('mouseleave', () => {
      glass.style.display = 'none';
    });
    container.addEventListener('mouseenter', () => {
      glass.style.display = 'block';
    });
  });
}

// 同步移动所有放大镜的核心函数
function moveMagnifier(e, img, glass) {
  e.preventDefault();
  const { zoom, glassSize } = magnifierConfig;
  
  // 获取鼠标在图片上的相对位置
  const rect = img.getBoundingClientRect();
  const x = e.pageX - rect.left - window.scrollX;
  const y = e.pageY - rect.top - window.scrollY;
  
  // 计算放大镜的位置（防止超出图片边界）
  let glassX = x - glassSize / 2;
  let glassY = y - glassSize / 2;
  
  // 边界处理
  if (glassX < 0) glassX = 0;
  if (glassY < 0) glassY = 0;
  if (glassX > img.width - glassSize) glassX = img.width - glassSize;
  if (glassY > img.height - glassSize) glassY = img.height - glassSize;
  
  // 设置放大镜的位置
  glass.style.left = `${glassX}px`;
  glass.style.top = `${glassY}px`;
  
  // 设置放大镜显示的图片区域（反向计算，因为背景图是放大的）
  const bgX = -((x * zoom) - glassSize / 2);
  const bgY = -((y * zoom) - glassSize / 2);
  glass.style.backgroundPosition = `${bgX}px ${bgY}px`;
}

// 页面加载完成后初始化
window.addEventListener('load', initMagnifiers);

关键注意点 #

• 图片尺寸统一：建议把4张图片设置成相同的宽高，这样同一鼠标位置对应的区域才是真正的“同一位置”，对比更准确。
• 放大倍数调整：zoom参数和CSS里的background-size要对应（比如zoom=6，background-size就是600% 600%），可以根据需求修改。
• 边界处理：代码里已经加了边界判断，防止放大镜移出图片范围。

这样修改后，你把鼠标放在任意一张图片上，4个放大镜都会同步显示对应位置的放大区域，完美满足对比需求！

内容的提问来源于stack exchange，提问作者Mohammad