首页 > 代码库 > 焦点图

焦点图

/*
 focus.js
 by sunhw 2014-10-16 重写
 */
;
(function() {
    function Focus( option ) {
        this.option = T.object.extend( {
            root     : ‘‘,
            dotroot  : ‘‘,
            item     : ‘‘,
            dot      : ‘‘,
            cls      : ‘current‘,
            progress : false
        }, option || {} );
        this.prevBtn = T.get( ‘prevBtn‘ );
        this.nextBtn = T.get( ‘nextBtn‘ );
        this.index = 0;
        this.total = 0;
        // 图片切换时间
        this.duration = 5000;
        // 动画时间
        this.delay = 600;
        // 进度条更新时间
        this.steps = T.browser.ie < 7 ? 50 : 20;
        this.width = 0;
        var timer = 0, flag = false, self = this;
        var initHandler = function() {
            clearTimeout( timer );
            if ( !flag ) {
                self.init();
                flag = true;
            }
        };
        timer = setTimeout( initHandler, 3000 );
        T.observer.addOne( F.EventCenter.FOCUS_AD_LOADED, initHandler );
    }

    Focus.prototype.play = function( index ) {
        var self = this;
        self.index = index;
        T.each( self.items, function( item, key ) {
            T.dom.setStyles( item, { ‘visibility‘ : ‘hidden‘, ‘opacity‘ : 0 } );
            //add by wangxk
            T.dom.removeClass( item, "z-3" );
            T.dom.addClass( item, "z-1" );
        } );
        T.each( self.dots, function( item, key ) {
            T.dom.removeClass( item, self.option.cls );
        } );
        T.dom.addClass( self.dots[ index ], self.option.cls );
        T.dom.setStyles( self.items[ index ], { ‘visibility‘ : ‘visible‘ } );
        T.dom.addClass( self.items[ index ], "z-3" );
        F.tween( self.items[ index ], F.math.tweener.easeOutQuint, self.delay / 1000, { ‘opacity‘ : 1 }, function() {
            self.option.progress && self.progress();
        } );
    };
    Focus.prototype.autoRun = function() {
        var self = this;
        self.stopRun();
        if ( self.total <= 1 ) {
            return;
        }
        if ( self.option.progress ) {
            self.progress();
        } else {
            self.autoTimer = setInterval( function() {
                self.play( ++self.index % self.total );
            }, self.duration );
        }
    };
    Focus.prototype.progress = function() {
        var self = this, $bar = T.get( ‘_progress‘ ), width = self.width || $bar.parentNode.offsetWidth, p = 0, d = self.duration, s = self.steps;
        // 重置进度条
        _clear();
        self.progressTimer = setTimeout( _execute, s );
        function _progress( p ) {
            if ( p > d ) {
                _clear();
                self.play( ++self.index % self.total );
                return;
            }
            T.dom.setStyle( $bar, ‘width‘, p * 100 / d + ‘%‘ );
            self.progressTimer = setTimeout( _execute, s );
        }

        function _clear() {
            clearTimeout( self.progressTimer );
            T.dom.setStyle( $bar, ‘width‘, 0 );
            T.dom.show( $bar.parentNode );
        }

        function _execute() {
            p += s;
            _progress( p );
        }
    };
    Focus.prototype.stopRun = function() {
        var self = this;
        clearInterval( self.autoTimer );
        clearTimeout( self.progressTimer );
    };
    Focus.prototype.init = function() {
        var self = this;
        var defer = 0, deferTime = 200;
        self.items = T.query( ‘#focusWrap li‘ );
        if ( !self.items.length || !T.get( self.option.dotroot ) ) {
            return;
        }
        self.html = ‘‘;
        self.tpl = ‘<a class="dot-wrp" href="javascript:;"><b class="dot"></b></a>‘;
        T.each( self.items, function( item ) {
            self.html += self.tpl;
        } );
        self.total = self.items.length;
        T.get( self.option.dotroot ).innerHTML = self.html;
        self.dots = T.query( ‘#dotLayout .dot-wrp‘ );
        T.dom.addClass( self.dots[ 0 ], ‘current‘ );
        T.each( self.dots, function( item, key ) {
            T.on( item, ‘mouseover‘, function() {
                clearTimeout( defer );
                defer = setTimeout( function() {
                    if ( !T.dom.hasClass( item, ‘current‘ ) ) { self.play( key );}
                    self.index = key;
                }, deferTime );
            } );
        } );
        if ( self.total > 1 ) {
            T.dom.setStyle( self.prevBtn, ‘visibility‘, ‘visible‘ );
            T.dom.setStyle( self.nextBtn, ‘visibility‘, ‘visible‘ );
        }
        T.on( self.prevBtn, ‘click‘, function() {
            if ( self.index <= 0 ) {
                self.index = self.items.length - 1;
            } else {
                self.index--;
            }
            self.play( self.index );
        } );
        T.on( self.nextBtn, ‘click‘, function() {
            if ( self.index >= self.items.length - 1 ) {
                self.index = 0;
            } else {
                self.index++;
            }
            self.play( self.index );
        } );
        T.on( T.get( self.option.root ), ‘mouseover‘, function() { self.stopRun(); } );
        T.on( T.get( self.option.root ), ‘mouseout‘, function() { self.autoRun(); } );
        //ipad
        self.ipad = T.platform.isIpad;
        var startX = 0, startMoveX = 0, startY = 0, startMoveY = 0, firstCheck = false;
        var onTouchStart = function( e ) {
            e = T.event.get( e );
            if ( !e.touches.length ) { return;}
            var touch = e.touches[ 0 ];
            startX = touch.pageX;
            startY = touch.pageY;
            startMoveX = 0;
            startMoveY = 0;
            firstCheck = false;
        };
        var onTouchMove = function( e ) {
            e = T.event.get( e );
            if ( !e.touches.length ) {return;}
            var touch = e.touches[ 0 ];
            startMoveX = touch.pageX;
            startMoveY = touch.pageY;
            if ( firstCheck || Math.abs( touch.pageY - startY ) < Math.abs( touch.pageX - startX ) ) {
                T.event.preventDefault( e );
            }
            firstCheck = true;
        };
        var onTouchEnd = function( e ) {
            var index = self.index;
            e = T.event.get( e );
            if ( startMoveX === 0 ) {return;}
            T.event.stop( e );
            if ( Math.abs( startMoveX - startX ) < Math.abs( startMoveY - startY ) ) {return;}
            if ( startMoveX > startX ) {
                self.play( index + 1 );
            } else {
                self.play( index - 1 );
            }
        };
        if ( self.ipad && ( self.total > 1 ) ) {
            T.each( self.items, function( item ) {
                T.on( item, ‘touchstart‘, onTouchStart );
                T.on( item, ‘touchmove‘, onTouchMove );
                T.on( item, ‘touchend‘, onTouchEnd );
            } );
        }
        if ( self.total > 1 ) {
            self.autoRun();
        }
    };
    T.dom.ready( function() {
        var focus = new Focus( {
            //progress : true,
            root    : ‘focusWrap‘,
            dotroot : ‘dotLayout‘,
            item    : ‘li‘,
            dot     : ‘a.dot-wrp‘,
            cls     : ‘current‘
        } );
    } );
})();

/*
    focus.less
    by sunhw 2014-9-17
*/
@import ‘/css/base‘;
.mod-focus {
    .foc-wrap {
        position : relative;
        width    : 100%;
        height   : 100%;
        .item {
            position   : absolute;
            top        : 0;
            left       : 0;
            width      : 100%;
            height     : 100%;
            overflow   : hidden;
            visibility : hidden;
            .opacity(0);
        }
        .foc-inner-list {
            position : relative;
            display  : block;
            width    : 100%;
            height   : 100%;
        }
        .pic {
            display : block;
            width   : 100%;
            height  : 100%;
        }
        .foc-text {
            position    : absolute;
            color       : #fff;
            text-shadow : 1px 1px 1px #000;
            b {
                display : block;
                width   : 100%;
            }
            .upd {
                margin-left : 12px;
            }
            .info {
                font-weight : bold;
            }
        }
        .foc-btn {
            .prev, .next {
                position    : absolute;
                top         : 50%;
                margin-top  : -24px;
                width       : 30px;
                height      : 48px;
                display     : block;
                text-align  : center;
                visibility  : hidden;
                background  : url(img/focus_btn.png) no-repeat 0 0;
                _background : none;
            }
            .prev {
                left    : 38px;
                _filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.mamicode.com/‘img/pre.png‘);
                &:hover {
                    background-position : -34px 0;
                    _filter             : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.mamicode.com/‘img/pre_hover.png‘);
                }
            }
            .next {
                right               : 38px;
                background-position : -95px 0;
                _filter             : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.mamicode.com/‘img/next.png‘);
                &:hover {
                    background-position : -61px 0;
                    _filter             : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.mamicode.com/‘img/next_hover.png‘);
                }
            }
        }
        .fon-con-inner {
            position : absolute;
            left     : 0;
            width    : 100%;
            height   : 100%;
        }
        .foc-con-dot {
            position   : absolute;
            bottom     : 26px;
            width      : 100%;
            height     : 0px;
            font-size  : 0;
            text-align : center;
            cursor     : pointer;
            .dot-wrp {
                padding : 5px 4px;
                display : inline-block;
                cursor  : pointer;
                &:hover .dot {
                    background-color : #fff;
                    .opacity(1);
                }
            }
            .dot {
                width            : 10px;
                height           : 10px;
                .border-radius(5px);
                vertical-align   : top;
                .opacity(.5);
                background-color : #ccc;
            }
            .current .dot {
                background-color : #fff;
                .opacity(1);
            }
        }
        .progress-wrap {
            font-size        : 0;
            width            : 100%;
            height           : 3px;
            background-color : transparent;
            position         : absolute;
            top              : 0;
            left             : 0;
            display          : none;
            .progress {
                .opacity(0.75);
                background-color : #f86400;
                height           : 100%;
                width            : 0;
            }
        }
    }
}
.resp1080_1220 {
    .mod-focus {
        .foc-wrap .foc-text {
            bottom : 40px;
            left   : 100px;
            .tit {
                font-size   : 22px;
                line-height : 30px;
            }
            .upd {
                font-size : 14px;
            }
            .info {
                font-size   : 14px;
                line-height : 28px;
            }
        }
    }
}
.resp1440 {
    .mod-focus {
        .foc-wrap .foc-text {
            bottom : 55px;
            left   : 120px;
            .tit {
                font-size   : 26px;
                line-height : 42px;
            }
            .upd {
                font-size : 16px;
            }
            .info {
                font-size   : 16px;
                line-height : 32px;
            }
        }
    }
}
.resp1660 {
    .mod-focus {
        .foc-wrap .foc-text {
            bottom : 70px;
            left   : 138px;
            .tit {
                font-size   : 30px;
                line-height : 42px;
            }
            .upd {
                font-size : 18px;
            }
            .info {
                font-size   : 16px;
                line-height : 32px;
            }
        }
    }
}
.resp1080_1220();
@media screen and (min-width : @screen-l-width) and (max-width : @screen-xl-width-s) {
    .resp1440();
}
@media screen and (min-width : @screen-xl-width) {
    .resp1660();
}
.w1080, .w1220 {
    .resp1080_1220();
}
.w1440 {
    .resp1440();
}
.w1660 {
    .resp1660();
}

焦点图