jquery - CSS 剪辑效果无法正常工作

Question

我正在我的网站上添加图像显示效果，但它似乎无法正常工作。

该站点将有几个类别，单击这些类别时会自动将类别的图片加载到幻灯片中。
如果您单击幻灯片放映中的任何图片，将弹出该图片的模态窗口，并在其下方显示另一张图片。

截至目前，我的剪辑功能正在运行，但出于某种原因，剪辑开始于 340 像素(因此显示完整图像，因为图像为 280 像素)而不是 0 像素，然后在 0- 的范围内移动280 像素。

有人可以检查我的代码，看看有什么问题吗？

function reveal(event) {
  event.target.previousElementSibling.style.clip = "rect(0px, "+(event.clientX-event.target.offsetLeft)+"px, 280px, 0px)";
}

.reveal{
  width: 280px;
  height: 280px;
  border:#000 1px solid;
  float:left;
  margin:24px;
}
.reveal > img {
  position:absolute;
}
.reveal > .modalimg2 {
  clip:rect(0px, 140px, 280px, 0px); /* top, right, bottom, left */ 
}
.reveal > .activator{
  position:absolute;
  width:280px;
  height:280px;
  opacity:0;
  cursor: e-resize;
}

<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class = "reveal">
        <!-- Modal Content (The Image) -->
        <img  src="" id = "mimg" class = "modalimg" width = "280px" height = "280px">
        <img  src="" id = "mimg2" class = "modalimg2" width = "280px" height = "280px">
        <div class = "activator" onmousemove = "reveal(event)"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

https://www.w3schools.com/jsref/prop_element_offsetleft.asp

我不是 100% 确定 event.clientX-event.target 是哪个元素。我怀疑它是“激活器”类的 div。在我看到的所有 CSS 中，该 div 的祖先都没有位置“相对”、“绝对”或“固定”，因此偏移父元素要么是层次结构中更上一层的元素，要么是 window 对象。尝试在 .reveal 上设置 position: relative;。如果 event.clientX-event.target 不是类激活器的 div，那么您可能会获取光标相对于窗口的位置，在这种情况下您需要减去偏移量.reveal 元素相对于 event.clientX-event.target.offsetLeft 中的窗口。如果是这种情况，这里有一个很好的指南:How to get an element's top position relative to the browser's window?