我想使用网络工具包重新创建最近在guardian.co.uk上展示的前后图像滑块。
http://www.guardian.co.uk/uk/interactive/2011/aug/09/london-riots-before-after-photographs
它基本上是两个图像在彼此的顶部，一个垂直滑块跟随鼠标，左侧显示一个图像，右侧显示另一个图像。
谢谢！
答案 0 :(得分：7)
我想出了一个例子here。它需要扩展一点，但它显示了基本原则。这不使用CSS3的东西，所以虽然没有使用CSS3获得GeekPoints（tm），但它可以在更多浏览器中加载。
<div class="reveal">
<div>
<span></span>
</div>
</div>
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);
}
});
答案 1 :(得分：3)
答案 2 :(得分：0)
以下是直接来自监护人页面的代码：
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 {}
}
正如你所看到的，这是一团糟。第一个参数是jQuery对象，第二个和第三个是urls之前/之后。
答案 3 :(得分：0)
万一有人还在寻找使用webkit和CSS3的解决方案 - 还有一个演示here。只需更改为“位置”。这可能不适用于Chrome。
答案 4 :(得分：0)
有趣的问题......
我想使用网络工具包重新创建最近在guardian.co.uk上展示的前后图像滑块。
你为什么不用原版？没有必要使用jQuery！
“卫报”是github上的“守护者”。他们知道如何做到这一点，所以它是OpenSource： https://github.com/guardian/image-fader-slider