Question

所以我发现了这个视频，我正在尝试将双重图像显示功能实现到我的客户的一个网站中。以下是视频：https://www.youtube.com/watch?v=eyEJvujXAwM&index=5&t=55s&list=PL9eBC8yKMyol9Bl9jefAiZL0v4IWi3QEA

图像显示基本上将图像定位在另一个图像下面然后使用CSS和jquery动态地使用剪辑来使图像剪切并显示其背后的图像。

该网站将有多个类别，点击后会自动将类别的图片加载到幻灯片中。如果单击幻灯片中的任何图片，则会弹出该图像的模式，并在其下方放置另一个图像。到目前为止我的剪辑功能正在工作，但由于某种原因，剪辑从340px开始（因此使整个图像显示，因为图像是280px），而不是0px，然后在0-280px的范围内移动。有人可以查看我的代码，看看有什么问题吗？

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

<div class = "img1">
                <img src = "http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px">
                <img src = "https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px">
            </div>

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 > .img2{
    clip:rect(0px, 140px, 280px, 0px); /* top, right, bottom, left */ 
}
.reveal > .activator{
    position:absolute;
    width:280px;
    height:280px;
    opacity:0;
    cursor: e-resize;
}

动态剪辑效果无法正常工作

0 个答案: