CSS 剪辑效果无法正常工作答案

【问题标题】：CSS clip effect not working properlyCSS 剪辑效果无法正常工作
【发布时间】：2017-06-26 09:28:19
【问题描述】：

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

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

到目前为止，我的剪辑功能正在运行，但由于某种原因，剪辑从 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>

【问题讨论】：

这里不是 100% 清楚你想要完成什么。 “剪辑”可能意味着许多不同的事情，具体取决于您使用的确切语言。 jQuery 有一个 Clip Effect 方法，我预计它应该使用相当少的 CSS 和 javascript 来完成您正在寻找的东西。见此链接：api.jqueryui.com/clip-effect

标签： jquery html css

【解决方案1】：

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

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

【讨论】：