我想使用 web-kit 重新创建最近在 Guardian.co.uk 上出现的前后图像滑块。
http://www.guardian.co.uk/uk/interactive/2011/aug/09/london-riots-before-after-photographs
它基本上是两个相互重叠的图像，带有一个跟随鼠标的垂直滑块，显示左侧的图像和右侧的图像。
【问题讨论】：
标签： jquery html css image mask
我想出了一个例子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);
}
});
【讨论】：
【讨论】：
这是直接取自监护人页面的代码：
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 对象，第二个和第三个是 URL 之前/之后。
【讨论】：
以防万一有人还在寻找使用 webkit 和 CSS3 的解决方案——这里有一个演示 here。只需更改为“位置”。这可能在 Chrome 之外的任何地方都不起作用。
【讨论】：
有趣的问题...
我想使用 web-kit 重新创建最近在 Guardian.co.uk 上出现的前后图像滑块。
为什么不使用原版？不需要 jQuery！
守护者是 github 上的“守护者”。他们知道怎么做，所以它是开源的： https://github.com/guardian/image-fader-slider
【讨论】：