当在图像上滑动时,新图像从中间出现并缩小并重新进入。我想更改此图像,使图像从侧面水平进入而不进行缩放。这是我正在谈论的网站:https://www.londontradition.com/product/emily/。以下是我想要使用的网站示例:https://www.ssense.com/en-gb/men/product/saint-laurent/white-broderie-anglaise-shirt/1399273。
以下是代码:
swipe: function() {
var S, I, N = 30,
K = 201,
P, Q = "",
H = {},
G, M, R = 0,
T = {
transition: y.jBrowser.cssTransform + String.fromCharCode(32) + "all ease"
},
J, O, L = h(function(U) {
if (!this.ready || this.zoomBox.active) {
return
}
if (U.state == "dragstart") {
clearTimeout(this.activateTimer);
this.activateTimer = null;
R = 0;
H = {
x: U.x,
y: U.y,
ts: U.timeStamp
};
S = this.size.width;
I = S / 15;
this.image.node.jRemoveEvent("transitionend");
this.image.node.jSetCssProp("transition", "");
this.image.node.jSetCssProp("transform", "translate3d(0, 0, 0)");
O = null
} else {
G = (U.x - H.x);
M = {
x: 0,
y: 0,
z: 0
};
if (null === O) {
O = (Math.abs(U.x - H.x) < Math.abs(U.y - H.y))
}
if (O) {
return
}
U.stop();
if ("dragend" == U.state) {
R = 0;
J = null;
P = U.timeStamp - H.ts;
if (Math.abs(G) > I || (P < K && Math.abs(G) > N)) {
if ((Q = (G > 0) ? "backward" : (G <= 0) ? "forward" : "")) {
if (Q == "backward") {
J = this.getPrev();
R += S * 10
} else {
J = this.getNext();
R -= S * 10
}
}
}
M.x = R;
M.deg = -90 * (M.x / S);
this.image.node.jAddEvent("transitionend", h(function(V) {
this.image.node.jRemoveEvent("transitionend");
this.image.node.jSetCssProp("transition", "");
if (J) {
this.image.node.jSetCss({
transform: "translate3d(" + M.x + "px, 0px, 0px)"
});
this.update(J, true)
}
}).jBind(this));
this.image.node.jSetCss(T);
this.image.node.jSetCss({
"transition-duration": M.x ? "200ms" : "200ms",
opacity: 1,
transform: "translate3d(" + M.x + "px, 0px, 0px)"
});
G = 0;
return
}
M.x = G;
M.z = -50 * Math.abs(M.x / I);
M.deg = -60 * (M.x / I);
this.image.node.jSetCss({
opacity: 1,
transform: "translate3d(" + M.x + "px, 0px, " + 0 + "px)"
})
}
}).jBind(this);
this.node.jAddEvent("touchdrag", L)
},