javascript - 使用 jquery 放置多个图像前后部分

Question

我正在尝试通过下面的 jquery 实现前后图像比较。它需要两张图像并显示比较结果。

fiddled here

<div>
(image comparison1)
</div>

<div>
(image comparison2)
</div>

<div>
(image comparison3)
</div>

虽然单对比较对我很有用，但问题是每当我想用多对实现相同的效果时，css中定义的容器大小就变得麻烦了。我试图将 css 的宽度和高度设置为自动并适合内容，但似乎没有任何效果。 我想在同一个页面上实现多对比较，如上面的 div 所示。

它就像成对的前后图像。每对大小不同。非常感谢任何对我的编码进行更正的建议。

提前致谢。

Answer 1

经过一番搜索，这是解决方案:

<div class="beforeAfterSlidebar" style="width:400px;height: 400px;">
    <div class="bottomImage"><img src="http://static13.jassets.com/p/Clarus-Urbane-Solid-Cotton-400-Tc-Satin-Double-Comforter-4656-990776-1-product2.jpg" width="400" height="400" alt="after" /></div>
    <div class="topImage"><img src="http://static13.jassets.com/p/Clarus-Urbane-Solid-Cotton-400-Tc-Satin-Double-Comforter-3369-201776-1-product2.jpg" width="400" height="400" alt="before" /></div>
</div>
<div class="beforeAfterSlidebar">
    <div class="bottomImage"><img src="http://upstairsweb.com/images/afterImage.jpg" width="200" height="200" alt="after" /></div>
    <div class="topImage"><img src="http://upstairsweb.com/images/beforeImage.jpg" width="200" height="200" alt="before" /></div>
</div>

使用 JS:

$(".topImage").css('width', '50%');
$(".beforeAfterSlidebar").mousemove(
function(e) {
  // get the mouse x (horizontal) position and offset of the div
  var offset =  $(this).offset();
  var iTopWidth = (e.pageX - offset.left);

  // set width of bottomimage div
  $(this).find(".topImage").width(iTopWidth);
});

=-=-=-=-=-=-=-=-=-=-=-=-=-=-

旧答案 - 但它们可能对其他人有帮助:

我想你的意思是这样的？

http://jsfiddle.net/m9jj2fsp/6/

我没有使用 div，而是使用图像来创建效果:

<div class="beforeAfterSlidebar">
    <img id="topImg" src="http://upstairsweb.com/images/afterImage.jpg" width="800" height="600" alt="after" />
    <img id="middleImg" src="http://placehold.it/300" width="800" height="600" alt="middel"/>   
    <img id="botImg" src="http://upstairsweb.com/images/beforeImage.jpg" width="800" height="600" alt="before" />
</div>

与之配套的 javascript:

  $(".beforeAfterSlidebar").mousemove(function(e) {
  // get the mouse x (horizontal) position and offset of the div
  var offset =  $(this).offset();
  var iTopWidth = (e.pageX - offset.left);

  // set width of bottomimage div
  $(this).children("#middleImg").css("clip", "rect(0px," +  (iTopWidth + 50) + "px,600px,"+(iTopWidth - 50) +"px)");
  $(this).children("#botImg").css("clip", "rect(0px," +  (iTopWidth - 50) + "px,600px,0)");
  });

如果这不是您需要的，请告诉我，我会尝试调整我的代码。