Question

我正在尝试使用onmousemove和objectPosition根据鼠标的位置定位图像。我希望视口的顶部为0％，底部为100％，如果此人滚动页面，则为独立。据我所知，这段代码应该可以解决问题：

window.onmousemove = event => {
  var pos = (event.clientY / window.innerHeight) * 100
  productImageZoomed.style.objectPosition = '50%' + pos + '%'
}

但是当我将鼠标移到页面上时，它只会检测到特定元素#image-main内的鼠标移动。我不知道为什么，我认为window对象可以在整个视口上工作。

相关HTML代码段：

<div id="image">
  <a class="image-zoom">
    <div class="zoomPad">
      <img id="image-main" src="/480-721/somename.png"><!-- mouse movement only detectable inside this element -->
      <figure class="product-image container-zoomed" style="display: none;">
        <img class="product-image image-zoomed" src="/1920-2880/somename.png" style="object-position: 50% 0%;"> <!-- the element to be positioned -->
        <figcaption><span>Click to close</span></figcaption>
      </figure>
    </div>
  </a>
</div>

我完全不知道发生了什么，有人可以帮忙吗？

如果您认为相关

，这是我的full JS code

跟踪鼠标移动仅适用于特定元素

0 个答案: