Question

我在我的网站上放置了一个图片显示效果，但它似乎没有正常工作。

该网站将有多个类别，点击后会自动将类别的图片加载到幻灯片中。
如果您单击幻灯片中的任何图片，将弹出该图像的模式，并在其下方放置另一个图像。

到目前为止，我的剪辑功能正常工作，但由于某种原因，剪辑以340px开始（因此使整个图像显示因为图像为280px），而不是0px，然后在0-范围内移动280像素。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

我不能100％确定哪个元素event.clientX-event.target。我怀疑它是阶级和激活者的分歧。＆＃34;在我看到的所有CSS中，没有一个div的祖先有位置＆＃34;亲，＆＃34; ＆＃34;绝对＆＃34;或者＆＃34;固定，＆＃34;所以偏移父项是层次结构中的元素或窗口对象。尝试在position: relative;上设置.reveal。如果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?

CSS剪辑效果无法正常工作

1 个答案: