"之前和之后"交互式图像掩码

Question

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

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

它基本上是两个相互叠加的图像,其中一个垂直滑块跟随鼠标,左侧显示一个图像,右侧显示另一个图像.

谢谢!

Answer 1

我想出了一个例子在这里.它需要扩展一点,但它显示了基本原则.这不使用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);
    }
});