"before and after" Interactive image mask_问答_开发者

I'd like to recreate the before and after image slider recently featured on the guardian.co.uk, using web-kit.

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

It's basically two images on top of each other with a vertical slider that follows the mouse, revealing one image on the left and the开发者_如何学C other on the right.

I've come up with an example here. It will need expanding a little, but it shows the basic principles. This doesn't use CSS3 stuff so, while not gaining GeekPoints(tm) for using CSS3, it'll work in loads more browsers.

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

here's a plugin http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

Here's the code taken straight from the guardian page:

ImageSlider = function (n, i, t) {
    var e = {};
    e.init = function () {
        e.container = n;
        e.beforeUrl = i;
        e.afterUrl = t;
        e.width = e.container.width();
        e.height = e.container.height();
        e.renderHtml();
        e.loadImages()
    };
    e.renderHtml = function () {
        var i = document.createDocumentFragment(),
            n = document.createElement("div");
        n.className = "imageMask";
        n.style.position = "absolute";
        n.style.overflow = "hidden";
        n.style.width = e.width + "px";
        n.style.height = e.height + "px";
        n.style.webkitBackfaceVisibility = "hidden";
        var y = document.createElement("div");
        y.style.position = "absolute";
        y.style.webkitBackfaceVisibility = "hidden";
        y.id = "before";
        var r = document.createElement("div");
        r.style.position = "absolute";
        r.style.webkitBackfaceVisibility = "hidden";
        r.id = "after";
        var w = document.createElement("div");
        w.className = "slider";
        w.style.position = "absolute";
        w.style.webkitBackfaceVisibility = "hidden";
        var t = document.createElement("div");
        t.style.left = "-2px";
        t.style.width = "4px";
        t.style.position = "absolute";
        t.style.height = e.height + "px";
        t.style.backgroundColor = "#FFF";
        t.style.boxShadow = "0 0 10px rgba(0, 0, 0, 1)";
        t.style.webkitBoxShadow = "0 0 10px rgba(0, 0, 0, 1)";
        t.style.MozBoxShadow = "0 0 10px rgba(0, 0, 0, 1)";
        var F = document.createElement("div");
        F.style.position = "absolute";
        F.style.width = e.width + "px";
        F.style.height = e.height + "px";
        n.appendChild(r);
        w.appendChild(t);
        i.appendChild(y);
        i.appendChild(n);
        i.appendChild(w);
        i.appendChild(F);
        e.container[0].style.position = "relative";
        e.container[0].style.overflow = "hidden";
        e.container.append(i.cloneNode(!0));
        e.preloader = e.container.children(".preloader");
        e.preloader[0].style.position = "absolute";
        e.preloader[0].style.top = (e.height - e.preloader.css("height").replace("px", "")) * 0.5 + "px";
        e.preloader[0].style.left = (e.width - e.preloader.css("width").replace("px", "")) * 0.5 + "px";
        e.handle = e.container.children(".slider");
        e.handleDisplay = e.handle.children();
        e.handleDisplay.hide();
        e.mask = e.container.children(".imageMask");
        e.before = e.container.children("#before");
        e.after = e.mask.children("#after")
    };
    e.loadImages = function () {
        e.imagesToLoad = 0;
        e.imagesLoaded = 0;
        e.loadImage(e.before, e.beforeUrl);
        e.loadImage(e.after, e.afterUrl)
    };
    e.loadImage = function (i, n) {
        e.imagesToLoad++;
        var t = new Image;
        $(t).load(function () {
            $(this).hide();
            $(i).removeClass("loading").append(this);
            e.imageLoaded()
        }).error(function () {}).attr("src", n)
    };
    e.imageLoaded = function () {
        e.imagesLoaded++;
        e.imagesLoaded >= e.imagesToLoad && e.allReady()
    };
    e.allReady = function () {
        e.setPosition(0, !0);
        e.before.children().fadeIn(500);
        e.after.children().fadeIn(500, e.finalise)
    };
    e.finalise = function () {
        e.dragging = !1;
        e.candrag = !0;
        e.lastXPos = 0;
        e.velocity = 0;
        Modernizr.touch && (document.addEventListener("touchstart", e.touchHandler, !0), document.addEventListener("touchmove", e.touchHandler, !0), document.addEventListener("touchend", e.touchHandler, !0), document.addEventListener("touchcancel", e.touchHandler, !0));
        e.container.mousedown(e.mouseDownHandler);
        e.container.mouseup(e.mouseUpHandler);
        e.container.mousemove(e.mouseMoveHandler);
        e.handleDisplay.fadeIn(250);
        e.preloader.remove();
        e.setPosition(e.width * 0.5, !1);
        Ticker.setFPS(30);
        Ticker.addListener(e)
    };
    e.tick = function () {
        if (e.dragging) e.lastXPos = e.handle.position().left;
        else if (e.velocity != 0) if (Math.abs(e.velocity) < 0.2) e.velocity = 0;
        else {
            e.velocity *= 0.9;
            var i = e.handle.position().left + e.velocity;
            if (i >= e.width) i = e.width, e.velocity = -e.velocity * 0.5;
            else if (i <= 0) i = 0, e.velocity = -e.velocity * 0.5;
            e.setPosition(i, !0)
        }
    };
    e.mouseDownHandler = function (i) {
        e.canDrag = !0;
        e.velocity = 0;
        e.setPosition(i.pageX - $(i.target).offset().left, !1);
        e.lastXPos = i.pageX - $(i.target).offset().left;
        i.preventDefault()
    };
    e.mouseUpHandler = function (i) {
        e.dragging ? (e.velocity = (e.handle.position().left - e.lastXPos) * 0.5, e.dragging = !1) : e.setPosition(i.pageX - $(i.target).offset().left, !1);
        e.canDrag = !1;
        i.preventDefault()
    };
    e.mouseMoveHandler = function (i) {
        if (e.canDrag) e.dragging = !0, e.setPosition(i.pageX - $(i.target).offset().left, !0);
        i.preventDefault()
    };
    e.setPosition = function (i, n) {
        var t = i - e.mask.width(),
            r = n ? 0 : 0.5;
        Modernizr.csstransforms && Modernizr.csstransitions ? (e.applyTransition(e.handle[0].style, "all " + r + "s ease-out 0s"), e.applyTransition(e.mask[0].style, "all " + r + "s ease-out 0s"), e.applyTransition(e.after[0].style, "all " + r + "s ease-out 0s"), / AppleWebKit\//.test(navigator.userAgent) ? (e.applyTransform(e.handle[0].style, "matrix(1,0,0,1," + i + ",0)"), e.applyTransform(e.mask[0].style, "matrix(1,0,0,1," + t + ",0)"), e.applyTransform(e.after[0].style, "matrix(1,0,0,1," + -t + ",0)")) : (e.applyTransform(e.handle[0].style, "matrix(1,0,0,1," + i + "px ,0)"), e.applyTransform(e.mask[0].style, "matrix(1,0,0,1," + t + "px ,0)"), e.applyTransform(e.after[0].style, "matrix(1,0,0,1," + -t + "px ,0)"))) : (e.mask.stop(), e.mask.animate({
            width: i
        }, r * 1E3), e.handle.stop(), e.handle.animate({
            left: i
        }, r * 1E3))
    };
    e.applyTransform = function (e, i) {
        e.transform = e.msTransform = e.OTransform = e.MozTransform = e.webkitTransform = i
    };
    e.applyTransition = function (e, i) {
        e.transition = e.msTransition = e.OTransition = e.MozTransition = e.webkitTransition = i
    };
    e.touchHandler = function (e) {
        var i = e.changedTouches[0],
            n = "";
        switch (e.type) {
        case "touchstart":
            n = "mousedown";
            break;
        case "touchmove":
            n = "mousemove";
            break;
        case "touchend":
            n = "mouseup";
            break;
        default:
            return
        }
        var r = document.createEvent("MouseEvent");
        r.initMouseEvent(n, !0, !0, window, 1, i.screenX, i.screenY, i.clientX, i.clientY, !1, !1, !1, !1, 0, null);
        i.target.dispatchEvent(r);
        e.preventDefault()
    };
    e.init();
    return {}
}

As you can see, it's quite a mess. The first argument is a jQuery object, and the second and third are before/after urls.

Just in case anybody is still looking for a solution using webkit and CSS3 -- there's a demo here. Just change to "Position". This might not work in anything but Chrome.

Funny question ...