jquery - "before and after"交互式图像 mask

Question

我想使用 web-kit 重新创建最近在 guardian.co.uk 上展示的前后图像 slider 。

http://www.guardian.co.uk/uk/interactive/2011/aug/09/london-riots-before-after-photographs

它基本上是两个图像相互叠加，带有一个跟随鼠标的垂直 slider ，在左侧显示一个图像，在右侧显示另一个图像。

Answer 1

我想出了一个例子 here .它需要稍微扩展一下，但它显示了基本原理。这不使用 CSS3 的东西，所以虽然不会因为使用 CSS3 而获得 GeekPoints(tm)，但它可以在更多浏览器中工作。

HTML

<div class="reveal">
    <div>
        <span></span>
    </div>
</div>

jQuery

var handle = $("div.reveal div span");

$(document).ready(function() {
    handle.mousedown(function() {
        $(this).data("sliding", true);
    });
    handle.mouseup(function() {
        $(this).data("sliding", false);
    });
});

$(document).mousemove(function(e) {
    var img = $("div.reveal div");

    if(handle.data("sliding"))
    {
        var offs = e.pageX - img.offset().left
        img.width(offs);
    }
});