如何在出现新图像时更改过渡

时间:2016-04-15 09:45:14

标签: javascript css mobile transform translate3d

当在图像上滑动时,新图像从中间出现并缩小并重新进入。我想更改此图像,使图像从侧面水平进入而不进行缩放。这是我正在谈论的网站: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)
        },

0 个答案:

没有答案