如何用JavaScript实现预览图Hover切换主图并保留放大镜效果？

要实现切换主图时放大镜效果同步更新，需要同步主图与放大镜的背景图，同时修复现有代码中的冗余和变量问题，以下是具体修改：

核心修改点 #

• 移除冗余的mag-overlay-two图层，仅保留一个放大镜容器，简化结构
• 改造setURL函数，在切换主图src的同时，同步更新放大镜的background-image
• 修复zoomIn函数中未定义的img变量，改为获取当前主图元素
• 添加鼠标移出主图时隐藏放大镜的逻辑，优化交互体验
• 精简CSS，适配简化后的布局

修改后完整代码 #

HTML #

<div class="main-img-preview-img-wrap">
  <div class="main-img-container">
    <img id="main-img" onmousemove="zoomIn(event)" onmouseleave="zoomOut()" src="https://rb.gy/1jca3j">
    <div id="mag-overlay" onmousemove="zoomIn(event)" onmouseleave="zoomOut()"></div>
  </div>
  <div class="product-preview-imgs-container-center">
    <div class="preview-imgs-wrap">
      <img id="preview-img-one" src="https://rb.gy/1jca3j" />
      <img id="preview-img-two" src="https://rb.gy/st92i9" />
      <img id="preview-img-three" src="https://rb.gy/ntzcbd" />
      <img id="preview-img-four" src="https://shorturl.at/pJPX1" />
      <img id="preview-img-five" src="https://shorturl.at/lMUX6" />
    </div>
  </div>
</div>

CSS #

.product-preview-imgs-container-center {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  width: 545.4px;
  height: 64px;
}

.preview-imgs-wrap {
  display: flex;
  justify-content: space-evenly;
  width: 352px;
  height: 64px;
}

#preview-img-one,
#preview-img-two,
#preview-img-three,
#preview-img-four,
#preview-img-five {
  width: 62.5667px;
  height: 62.5667px;
  cursor: pointer;
  object-fit: cover;
}

#preview-img-one:hover,
#preview-img-two:hover,
#preview-img-three:hover,
#preview-img-four:hover,
#preview-img-five:hover {
  border: 1px solid #191919;
  border-radius: 6px;
}

/* Magnifying Glass CSS */
.main-img-container {
  width: 450.217px;
  height: 450.217px;
  position: relative;
  overflow: hidden;
}

#main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

#main-img:hover {
  opacity: 0;
}

#mag-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-repeat: no-repeat;
  background-size: 175%;
  z-index: -1;
}

JavaScript #

// Preview-img change on hover
function setURL(newUrl) {
  return function () {
    const mainImg = document.getElementById('main-img');
    const magOverlay = document.getElementById('mag-overlay');
    // 更新主图
    mainImg.setAttribute('src', newUrl);
    // 同步更新放大镜背景图
    magOverlay.style.backgroundImage = `url(${newUrl})`;
  }
}

// 绑定预览图鼠标移入事件
document.getElementById('preview-img-one').addEventListener('mouseover', setURL('https://rb.gy/1jca3j'));
document.getElementById('preview-img-two').addEventListener('mouseover', setURL('https://rb.gy/st92i9'));
document.getElementById('preview-img-three').addEventListener('mouseover', setURL('https://rb.gy/ntzcbd'));
document.getElementById('preview-img-four').addEventListener('mouseover', setURL('https://shorturl.at/pJPX1'));
document.getElementById('preview-img-five').addEventListener('mouseover', setURL('https://shorturl.at/lMUX6'));

// Magnify glass
function zoomIn(event) {
  const magOverlay = document.getElementById("mag-overlay");
  const mainImg = document.getElementById("main-img");
  magOverlay.style.display = "block";
  
  // 计算鼠标在主图上的相对位置
  const rect = mainImg.getBoundingClientRect();
  const posX = event.clientX - rect.left;
  const posY = event.clientY - rect.top;
  
  // 调整放大镜背景偏移，实现跟随效果
  magOverlay.style.backgroundPosition = `${-posX * 0.9}px ${-posY * 0.9}px`;
}

// 鼠标移出时隐藏放大镜
function zoomOut() {
  const magOverlay = document.getElementById("mag-overlay");
  magOverlay.style.display = "none";
}

说明 #

1. 同步更新逻辑：在setURL函数中，每次切换主图时，同时将放大镜的background-image设置为相同的图片地址，确保两者内容一致。
2. 变量修复：用getElementById获取主图元素，替代原来未定义的img变量，避免报错。
3. 交互优化：添加zoomOut函数，鼠标移出主图时隐藏放大镜，符合目标平台的交互逻辑。
4. CSS优化：将放大镜容器改为绝对定位，简化布局，同时给预览图添加cursor: pointer提示可交互。

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