请问这个幻灯片,大图切换的动画效果怎么弄的呢?

Question

请问这个例子,大图切换的动画效果怎么弄的呢?
网站也提供了源文件,但是由好几十个css.js组成,很多都是重新编译过的.
自己找也找不出来,就说说大图切换是怎么弄的呢?

会用到哪些主要的函数?
小的我自己做了个也会做了.
http://sc.chinaz.com/jiaoben/...

Answer 1

實際上只需要看一個文件

scr/photor.js。不過這就厲害了，參數注釋用的是俄語。。

下方圖片導航的方框移動效果在setCurrentThumb中實現。

大圖的切換效果在go中實現。

兩者所用的實現方式是一致的。

使用的都是 CSS3 中的，translate3d或translateX，以及transition-duration。

        setCurrentThumb: function(galleryId, target, noEffects) {
            var p = data[galleryId];

            if (p.params.showThumbs == 'thumbs') {
                var frame = p.thumbFrame,
                    styles = {},
                    current = p.galleryThumbs && p.galleryThumbs[target],
                    thumbsW = p.thumbs.outerWidth(),
                    layerW = p.thumbsLayer.outerWidth(),
                    duration = noEffects ? '0s' : (p.params.duration * 0.8 / 1000) + 's',
                    indent,
                    validatedIndent;

                p.thumbsDragging = thumbsW < layerW;

                if (p.galleryThumbsLoaded) {
                    styles.width = current.width + 'px';
                    styles.height = current.height + 'px';

                    if (p.params.transform) {
                        var property = prefixes[p.params.transform.property];

                        if (p.params.transform.has3d) {
                            styles[property] = 'translate3d(' + current.left + 'px, ' + current.top + 'px, 0)';
                        } else {
                            styles[property] = 'translateX(' + current.left + 'px) translateY(' + current.top + 'px)';
                        }
                    } else {
                        styles.top = current.top + 'px';
                        styles.left = current.left + 'px';
                    }

                    indent = (thumbsW - current.width) * 0.5 - current.left;
                    validatedIndent = validateIndent(indent);
                    p.thumbsIndent = validatedIndent;

                    frame
                        .css('transition-duration', duration)
                        .css(styles);

                    p.thumbsLayer
                        .css('transition-duration', duration)
                        .css(methods.setIndent(galleryId, validatedIndent, 'px'));
                }
            }

        go: function(galleryId, target, duration) {
            var p = data[galleryId];

            if (p.freeze) {
                return;
            }

            //toggleSlides(galleryId, target);

            duration = duration == null ? p.params.duration : duration;

            p.root.addClass(p.params._animated); // 關鍵

            p.layer                              // 關鍵
                .css('transition-duration', duration + 'ms')
                // .css(methods.setIndent(galleryId, -target * p.viewportWidth));
                .css(methods.setIndent(galleryId, -target * (p.viewportWidth / p.params.slidesOnScreen), 'px'));

            p.current = target;

            // Load slide's range
            methods.loadSlides(galleryId, target);
            methods.checkButtons(galleryId);

            // Mark slide and thumb as current
            methods.setCurrentThumb(galleryId, target);

            p.slide.removeClass(p.params._current);
            p.slide
                .filter('.' + p.params.modifierPrefix + target)
                .addClass(p.params._current);

            if (!p.params.transition) {
                callback(galleryId);
            }

        },