将鼠标悬停在图像上并使用javascript在另一张图像上获得缩放效果？

Question

代码细分：

此代码有一个主图像（顶部的大图片），然后是比主图像更小的预览图片。 （忽略底部的大图，因为它用于帮助直观地排除代码故障）。

  // Preview-img change on hover

  function setURL(newUrl) {
    var url = newUrl;
    return function () {
      document.getElementById('main-img').setAttribute('src', url);
    }
  }
  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) {
    var element = document.getElementById("mag-overlay");
    element.style.display = "inline-block";
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
    element.style.backgroundPosition = (-posX * .9) + "px " + (-posY * .9) + "px";
 
    var element = document.getElementById("mag-overlay-two");
    element.style.display = "inline-block";
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
    element.style.backgroundPosition = (-posX * .9) + "px " + (-posY * .9) + "px";
  }

  .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;
  }

  #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;
    width: 62.5667px;
    height: 62.5667px;
  }

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

  #main-img {
    width: 450.217px;
    height: 450.217px;
  }

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

  #mag-overlay {
    position: relative;
    left: -1px;
    bottom: 455px;
    width: 450.217px;
    height: 450.217px;
    display: inline-block;
    background-image: url("https://shorturl.at/qDN03");
    background-repeat: no-repeat;
    background-size: 175%;
    z-index: -1;
  }

  #mag-overlay-two {
    position: relative;
    left: -1px;
    bottom: 355px;
    width: 450.217px;
    height: 450.217px;
    display: inline-block;
    background-image: url("https://shorturl.at/qDN03");
    background-repeat: no-repeat;
    background-size: 175%;
    z-index: -1;
  }

  <div class="main-img-preview-img-wrap">
    <div class="main-img-container">
      <img id="main-img" onmousemove="zoomIn(event)" src="https://rb.gy/1jca3j">
      <div id="mag-overlay" onmousemove="zoomIn(event)"></div>
      <div id="mag-overlay-two" onmousemove="zoomIn(event)"></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>

我想要实现的目标：

我想要发生的是，当鼠标悬停在每个较小的预览图片上时，顶部主图片将更改为鼠标悬停在其上的预览图片。我想在不取消缩放效果的情况下执行此操作，因为缩放效果应该放大每个预览图片。

听起来很简单，但我已经为此苦苦挣扎了好几天。

什么可能有效：

我假设这部分代码需要一个像 if..else 这样的条件语句才能使其工作，我已经尝试过但失败了：

  function zoomIn(event) {
    var element = document.getElementById("mag-overlay");
    element.style.display = "inline-block";
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
    element.style.backgroundPosition = (-posX * .9) + "px " + (-posY * .9) + "px";
  }

  function zoomIn(event) {
    var element = document.getElementById("mag-overlay-two");
    element.style.display = "inline-block";
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
    element.style.backgroundPosition = (-posX * .9) + "px " + (-posY * .9) + "px";
  }

我正在尝试实现的内容的视觉效果：

我基本上是在尝试复制速卖通在其网站上的相同效果，您可以在这里直观地看到：https://shorturl.at/dkwKY

如何使用我拥有的代码或使用 javascript 的任何其他方式来实现此目的？谢谢！

Answer 1

function setURL(newUrl) {
    return function () {
        document.getElementById('main-img').setAttribute('src', newUrl);
        document.getElementById('mag-overlay').style.backgroundImage = "url('" + newUrl + "')";
        document.getElementById('mag-overlay-two').style.backgroundImage = "url('" + newUrl + "')";
    };
}

您没有更改这两个元素的 CSS 中的背景图像。