• <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
      <nav id="xcyjv"></nav>
    1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>

        HTML5實現的震撼3D焦點圖動畫的示例代碼

          發布時間:2019-09-26 16:08:10   作者:前沿技術   我要評論
        這篇文章主要介紹了HTML5實現的震撼3D焦點圖動畫的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

        這是一款基于HTML5和jQuery的3D焦點圖動畫,焦點圖中的圖片利用了CSS3的相關特性實現圖片傾斜效果,從而讓圖片出現3D的視覺效果。這款HTML5焦點圖不僅可以手動點擊按鈕切換圖片,而且還支持自動切換圖片,使用起來也相當方便。如果你需要在網站中展示產品圖片,那么這款焦點圖插件非常適合你。

        HTML代碼
         

            <div class="dg-wrapper">
                <a href="#"><img src="images/1.jpg" alt="image01"><div>http://www.colazionedamichy.it/</div></a>
                <a href="#"><img src="images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a>
                <a href="#"><img src="images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a>
                <a href="#"><img src="images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a>
                <a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a>
                <a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a>
                <a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a>
                <a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a>
                <a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a>
                <a href="#"><img src="images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a>
                <a href="#"><img src="images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a>
                <a href="#"><img src="images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a>
            </div>
            <nav>   
                <span class="dg-prev">&lt;</span>
                <span class="dg-next">&gt;</span>
            </nav>
        </section>
        

        CSS代碼
         

        .dg-container{
            width: 100%;
            height: 450px;
            position: relative;
        }
        .dg-wrapper{
            width: 481px;
            height: 316px;
            margin: 0 auto;
            position: relative;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -o-perspective: 1000px;
            -ms-perspective: 1000px;
            perspective: 1000px;
        }
        .dg-wrapper a{
            width: 482px;
            height: 316px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            background: transparent url(../images/browser.png) no-repeat top left;
            box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
        }
        .dg-wrapper a.dg-transition{
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        .dg-wrapper a img{
            display: block;
            padding: 41px 0px 0px 1px;
        }
        .dg-wrapper a div{
            font-style: italic;
            text-align: center;
            line-height: 50px;
            text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
            color: #333;
            font-size: 16px;
            width: 100%;
            bottom: -55px;
            display: none;
            position: absolute;
        }
        .dg-wrapper a.dg-center div{
            display: block;
        }
        .dg-container nav{
            width: 58px;
            position: absolute;
            z-index: 1000;
            bottom: 40px;
            left: 50%;
            margin-left: -29px;
        }
        .dg-container nav span{
            text-indent: -9000px;
            float: left;
            cursor:pointer;
            width: 24px;
            height: 25px;
            opacity: 0.8;
            background: transparent url(../images/arrows.png) no-repeat top left;
        }
        .dg-container nav span:hover{
            opacity: 1;
        }
        .dg-container nav span.dg-next{
            background-position: top right;
            margin-left: 10px;
        }</pre>
        
        ## JavaScript代碼
        
        <pre class="brush: javascript; gutter: false; first-line: 1 hljs" style="margin: 15px auto; padding: 10px 15px; display: block; overflow-x: auto; color: rgb(51, 51, 51); background: rgb(251, 251, 251); word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; font: 400 12px/20px &quot;courier new&quot;; border-width: 1px 1px 1px 4px; border-style: solid; border-color: rgb(221, 221, 221); border-image: initial; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">/**
         * jquery.gallery.js
         * http://www.codrops.com
         *
         * Copyright 2011, Pedro Botelho / Codrops
         * Free to use under the MIT license.
         *
         * Date: Mon Jan 30 2012
         */
        
        (function( $, undefined ) {
        
            /*
             * Gallery object.
             */
            $.Gallery               = function( options, element ) {
        
                this.$el    = $( element );
                this._init( options );
        
            };
        
            $.Gallery.defaults      = {
                current     : 0,    // index of current item
                autoplay    : false,// slideshow on / off
                interval    : 2000  // time between transitions
            };
        
            $.Gallery.prototype     = {
                _init               : function( options ) {
        
                    this.options        = $.extend( true, {}, $.Gallery.defaults, options );
        
                    // support for 3d / 2d transforms and transitions
                    this.support3d      = Modernizr.csstransforms3d;
                    this.support2d      = Modernizr.csstransforms;
                    this.supportTrans   = Modernizr.csstransitions;
        
                    this.$wrapper       = this.$el.find('.dg-wrapper');
        
                    this.$items         = this.$wrapper.children();
                    this.itemsCount     = this.$items.length;
        
                    this.$nav           = this.$el.find('nav');
                    this.$navPrev       = this.$nav.find('.dg-prev');
                    this.$navNext       = this.$nav.find('.dg-next');
        
                    // minimum of 3 items
                    if( this.itemsCount < 3 ) {
        
                        this.$nav.remove();
                        return false;
        
                    }   
        
                    this.current        = this.options.current;
        
                    this.isAnim         = false;
        
                    this.$items.css({
                        'opacity'   : 0,
                        'visibility': 'hidden'
                    });
        
                    this._validate();
        
                    this._layout();
        
                    // load the events
                    this._loadEvents();
        
                    // slideshow
                    if( this.options.autoplay ) {
        
                        this._startSlideshow();
        
                    }
        
                },
                _validate           : function() {
        
                    if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {
        
                        this.current = 0;
        
                    }   
        
                },
                _layout             : function() {
        
                    // current, left and right items
                    this._setItems();
        
                    // current item is not changed
                    // left and right one are rotated and translated
                    var leftCSS, rightCSS, currentCSS;
        
                    if( this.support3d && this.supportTrans ) {
        
                        leftCSS     = {
                            '-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                            '-moz-transform'    : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                            '-o-transform'      : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                            '-ms-transform'     : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                            'transform'         : 'translateX(-350px) translateZ(-200px) rotateY(45deg)'
                        };
        
                        rightCSS    = {
                            '-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                            '-moz-transform'    : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                            '-o-transform'      : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                            '-ms-transform'     : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                            'transform'         : 'translateX(350px) translateZ(-200px) rotateY(-45deg)'
                        };
        
                        leftCSS.opacity     = 1;
                        leftCSS.visibility  = 'visible';
                        rightCSS.opacity    = 1;
                        rightCSS.visibility = 'visible';
        
                    }
                    else if( this.support2d && this.supportTrans ) {
        
                        leftCSS     = {
                            '-webkit-transform' : 'translate(-350px) scale(0.8)',
                            '-moz-transform'    : 'translate(-350px) scale(0.8)',
                            '-o-transform'      : 'translate(-350px) scale(0.8)',
                            '-ms-transform'     : 'translate(-350px) scale(0.8)',
                            'transform'         : 'translate(-350px) scale(0.8)'
                        };
        
                        rightCSS    = {
                            '-webkit-transform' : 'translate(350px) scale(0.8)',
                            '-moz-transform'    : 'translate(350px) scale(0.8)',
                            '-o-transform'      : 'translate(350px) scale(0.8)',
                            '-ms-transform'     : 'translate(350px) scale(0.8)',
                            'transform'         : 'translate(350px) scale(0.8)'
                        };
        
                        currentCSS  = {
                            'z-index'           : 999
                        };
        
                        leftCSS.opacity     = 1;
                        leftCSS.visibility  = 'visible';
                        rightCSS.opacity    = 1;
                        rightCSS.visibility = 'visible';
        
                    }
        
                    this.$leftItm.css( leftCSS || {} );
                    this.$rightItm.css( rightCSS || {} );
        
                    this.$currentItm.css( currentCSS || {} ).css({
                        'opacity'   : 1,
                        'visibility': 'visible'
                    }).addClass('dg-center');
        
                },
                _setItems           : function() {
        
                    this.$items.removeClass('dg-center');
        
                    this.$currentItm    = this.$items.eq( this.current );
                    this.$leftItm       = ( this.current === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );
                    this.$rightItm      = ( this.current === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$items.eq( this.current + 1 );
        
                    if( !this.support3d && this.support2d && this.supportTrans ) {
        
                        this.$items.css( 'z-index', 1 );
                        this.$currentItm.css( 'z-index', 999 );
        
                    }
        
                    // next & previous items
                    if( this.itemsCount > 3 ) {
        
                        // next item
                        this.$nextItm       = ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next();
                        this.$nextItm.css( this._getCoordinates('outright') );
        
                        // previous item
                        this.$prevItm       = ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();
                        this.$prevItm.css( this._getCoordinates('outleft') );
        
                    }
        
                },
                _loadEvents         : function() {
        
                    var _self   = this;
        
                    this.$navPrev.on( 'click.gallery', function( event ) {
        
                        if( _self.options.autoplay ) {
        
                            clearTimeout( _self.slideshow );
                            _self.options.autoplay  = false;
        
                        }
        
                        _self._navigate('prev');
                        return false;
        
                    });
        
                    this.$navNext.on( 'click.gallery', function( event ) {
        
                        if( _self.options.autoplay ) {
        
                            clearTimeout( _self.slideshow );
                            _self.options.autoplay  = false;
        
                        }
        
                        _self._navigate('next');
                        return false;
        
                    });
        
                    this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) {
        
                        _self.$currentItm.addClass('dg-center');
                        _self.$items.removeClass('dg-transition');
                        _self.isAnim    = false;
        
                    });
        
                },
                _getCoordinates     : function( position ) {
        
                    if( this.support3d && this.supportTrans ) {
        
                        switch( position ) {
                            case 'outleft':
                                return {
                                    '-webkit-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
                                    '-moz-transform'    : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
                                    '-o-transform'      : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
                                    '-ms-transform'     : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
                                    'transform'         : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
                                    'opacity'           : 0,
                                    'visibility'        : 'hidden'
                                };
                                break;
                            case 'outright':
                                return {
                                    '-webkit-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
                                    '-moz-transform'    : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
                                    '-o-transform'      : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
                                    '-ms-transform'     : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
                                    'transform'         : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
                                    'opacity'           : 0,
                                    'visibility'        : 'hidden'
                                };
                                break;
                            case 'left':
                                return {
                                    '-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                                    '-moz-transform'    : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                                    '-o-transform'      : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                                    '-ms-transform'     : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                                    'transform'         : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
                                    'opacity'           : 1,
                                    'visibility'        : 'visible'
                                };
                                break;
                            case 'right':
                                return {
                                    '-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                                    '-moz-transform'    : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                                    '-o-transform'      : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                                    '-ms-transform'     : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                                    'transform'         : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
                                    'opacity'           : 1,
                                    'visibility'        : 'visible'
                                };
                                break;
                            case 'center':
                                return {
                                    '-webkit-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
                                    '-moz-transform'    : 'translateX(0px) translateZ(0px) rotateY(0deg)',
                                    '-o-transform'      : 'translateX(0px) translateZ(0px) rotateY(0deg)',
                                    '-ms-transform'     : 'translateX(0px) translateZ(0px) rotateY(0deg)',
                                    'transform'         : 'translateX(0px) translateZ(0px) rotateY(0deg)',
                                    'opacity'           : 1,
                                    'visibility'        : 'visible'
                                };
                                break;
                        };
        
                    }
                    else if( this.support2d && this.supportTrans ) {
        
                        switch( position ) {
                            case 'outleft':
                                return {
                                    '-webkit-transform' : 'translate(-450px) scale(0.7)',
                                    '-moz-transform'    : 'translate(-450px) scale(0.7)',
                                    '-o-transform'      : 'translate(-450px) scale(0.7)',
                                    '-ms-transform'     : 'translate(-450px) scale(0.7)',
                                    'transform'         : 'translate(-450px) scale(0.7)',
                                    'opacity'           : 0,
                                    'visibility'        : 'hidden'
                                };
                                break;
                            case 'outright':
                                return {
                                    '-webkit-transform' : 'translate(450px) scale(0.7)',
                                    '-moz-transform'    : 'translate(450px) scale(0.7)',
                                    '-o-transform'      : 'translate(450px) scale(0.7)',
                                    '-ms-transform'     : 'translate(450px) scale(0.7)',
                                    'transform'         : 'translate(450px) scale(0.7)',
                                    'opacity'           : 0,
                                    'visibility'        : 'hidden'
                                };
                                break;
                            case 'left':
                                return {
                                    '-webkit-transform' : 'translate(-350px) scale(0.8)',
                                    '-moz-transform'    : 'translate(-350px) scale(0.8)',
                                    '-o-transform'      : 'translate(-350px) scale(0.8)',
                                    '-ms-transform'     : 'translate(-350px) scale(0.8)',
                                    'transform'         : 'translate(-350px) scale(0.8)',
                                    'opacity'           : 1,
                                    'visibility'        : 'visible'
                                };
                                break;
                            case 'right':
                                return {
                                    '-webkit-transform' : 'translate(350px) scale(0.8)',
                                    '-moz-transform'    : 'translate(350px) scale(0.8)',
                                    '-o-transform'      : 'translate(350px) scale(0.8)',
                                    '-ms-transform'     : 'translate(350px) scale(0.8)',
                                    'transform'         : 'translate(350px) scale(0.8)',
                                    'opacity'           : 1,
                                    'visibility'        : 'visible'
                                };
                                break;
                            case 'center':
                                return {
                                    '-webkit-transform' : 'translate(0px) scale(1)',
                                    '-moz-transform'    : 'translate(0px) scale(1)',
                                    '-o-transform'      : 'translate(0px) scale(1)',
                                    '-ms-transform'     : 'translate(0px) scale(1)',
                                    'transform'         : 'translate(0px) scale(1)',
                                    'opacity'           : 1,
                                    'visibility'        : 'visible'
                                };
                                break;
                        };
        
                    }
                    else {
        
                        switch( position ) {
                            case 'outleft'  : 
                            case 'outright' : 
                            case 'left'     : 
                            case 'right'    :
                                return {
                                    'opacity'           : 0,
                                    'visibility'        : 'hidden'
                                };
                                break;
                            case 'center'   :
                                return {
                                    'opacity'           : 1,
                                    'visibility'        : 'visible'
                                };
                                break;
                        };
        
                    }
        
                },
                _navigate           : function( dir ) {
        
                    if( this.supportTrans && this.isAnim )
                        return false;
        
                    this.isAnim = true;
        
                    switch( dir ) {
        
                        case 'next' :
        
                            this.current    = this.$rightItm.index();
        
                            // current item moves left
                            this.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') );
        
                            // right item moves to the center
                            this.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') ); 
        
                            // next item moves to the right
                            if( this.$nextItm ) {
        
                                // left item moves out
                                this.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') );
        
                                this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') );
        
                            }
                            else {
        
                                // left item moves right
                                this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') );
        
                            }
                            break;
        
                        case 'prev' :
        
                            this.current    = this.$leftItm.index();
        
                            // current item moves right
                            this.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') );
        
                            // left item moves to the center
                            this.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') );
        
                            // prev item moves to the left
                            if( this.$prevItm ) {
        
                                // right item moves out
                                this.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') );
        
                                this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') );
        
                            }
                            else {
        
                                // right item moves left
                                this.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') );
        
                            }
                            break;  
        
                    };
        
                    this._setItems();
        
                    if( !this.supportTrans )
                        this.$currentItm.addClass('dg-center');
        
                },
                _startSlideshow     : function() {
        
                    var _self   = this;
        
                    this.slideshow  = setTimeout( function() {
        
                        _self._navigate( 'next' );
        
                        if( _self.options.autoplay ) {
        
                            _self._startSlideshow();
        
                        }
        
                    }, this.options.interval );
        
                },
                destroy             : function() {
        
                    this.$navPrev.off('.gallery');
                    this.$navNext.off('.gallery');
                    this.$wrapper.off('.gallery');
        
                }
            };
        
            var logError            = function( message ) {
                if ( this.console ) {
                    console.error( message );
                }
            };
        
            $.fn.gallery            = function( options ) {
        
                if ( typeof options === 'string' ) {
        
                    var args = Array.prototype.slice.call( arguments, 1 );
        
                    this.each(function() {
        
                        var instance = $.data( this, 'gallery' );
        
                        if ( !instance ) {
                            logError( "cannot call methods on gallery prior to initialization; " +
                            "attempted to call method '" + options + "'" );
                            return;
                        }
        
                        if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                            logError( "no such method '" + options + "' for gallery instance" );
                            return;
                        }
        
                        instance[ options ].apply( instance, args );
        
                    });
        
                } 
                else {
        
                    this.each(function() {
        
                        var instance = $.data( this, 'gallery' );
                        if ( !instance ) {
                            $.data( this, 'gallery', new $.Gallery( options, this ) );
                        }
                    });
        
                }
        
                return this;
        
            };
        
        })( jQuery );
        
        

        以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

        相關文章

        最新評論

        01彩票网app
      1. <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
          <nav id="xcyjv"></nav>
        1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>
            东方 | 金坛 | 肇庆 | 丹阳 | 固原 | 梅州 | 海宁 | 兴安盟 | 五家渠 | 海北 | 烟台 | 无锡 | 百色 | 广饶 | 泸州 | 潮州 | 庆阳 | 大庆 | 恩施 | 永康 | 佳木斯 | 随州 | 榆林 | 库尔勒 | 台湾台湾 | 泰安 | 漯河 | 雄安新区 | 保山 | 大同 | 平顶山 | 朔州 | 基隆 | 济源 | 怒江 | 北海 | 甘南 | 江门 | 大连 | 六安 | 毕节 | 枣阳 | 咸宁 | 呼伦贝尔 | 如皋 | 普洱 | 榆林 | 榆林 | 焦作 | 馆陶 | 库尔勒 | 青州 | 偃师 | 长垣 | 汕尾 | 库尔勒 | 吉林长春 | 吉林 | 桂林 | 池州 | 烟台 | 宁波 | 信阳 | 中卫 | 淮北 | 贵州贵阳 | 辽宁沈阳 | 石狮 | 湘西 | 大兴安岭 | 安顺 | 衡水 | 长兴 | 济南 | 日喀则 | 儋州 | 铜川 | 建湖 | 长垣 | 张掖 | 东阳 | 陕西西安 | 邢台 | 章丘 | 吕梁 | 保山 | 泉州 | 濮阳 | 新乡 | 唐山 | 金坛 | 金坛 | 澄迈 | 昆山 | 临海 | 天水 | 兴安盟 | 九江 | 达州 | 防城港 | 晋城 | 赵县 | 永康 | 聊城 | 庄河 | 绥化 | 徐州 | 和田 | 海东 | 塔城 | 河北石家庄 | 景德镇 | 抚顺 | 乳山 | 哈密 | 泰兴 | 单县 | 荆门 | 绵阳 | 河源 | 鄢陵 | 甘南 | 红河 | 阿克苏 | 绵阳 | 梅州 | 张家口 | 澳门澳门 | 佳木斯 | 德阳 | 海门 | 乳山 | 涿州 | 宣城 | 酒泉 | 柳州 | 海宁 | 定州 | 蓬莱 | 周口 | 甘南 | 湛江 | 宿州 | 延边 | 三亚 | 盐城 | 湘潭 | 吴忠 | 龙岩 | 海南 | 汕尾 | 金华 | 保山 | 昌吉 | 嘉兴 | 包头 | 赵县 | 文山 | 沛县 | 河池 | 新沂 | 三沙 | 吉安 | 大同 | 乌兰察布 | 葫芦岛 | 呼伦贝尔 | 澳门澳门 | 三亚 | 铜仁 | 义乌 | 杞县 | 兴安盟 | 辽阳 | 天长 | 邯郸 | 桐城 | 新泰 | 海西 | 咸阳 | 景德镇 | 无锡 | 海宁 | 张掖 | 儋州 | 海东 | 日土 | 柳州 | 香港香港 | 七台河 | 廊坊 | 湘潭 | 日照 | 鄢陵 | 高雄 | 靖江 | 伊春 | 东阳 | 临汾 | 黄南 | 宜昌 | 泗洪 | 厦门 | 淮南 | 泰州 | 定州 | 慈溪 | 吉安 | 金昌 | 桓台 | 池州 | 喀什 | 漳州 | 榆林 | 浙江杭州 | 滁州 | 广饶 | 鸡西 | 乌兰察布 | 乐山 | 喀什 | 萍乡 | 漯河 | 邵阳 | 昌吉 | 阳江 | 沭阳 | 汕头 | 克拉玛依 | 南京 | 河池 | 淮南 | 毕节 | 南平 | 白银 | 平顶山 | 改则 | 平潭 | 绵阳 | 永州 | 通辽 | 辽源 | 江西南昌 | 保亭 | 洛阳 | 三亚 | 保定 | 永州 | 滕州 | 大同 | 安徽合肥 | 宁国 | 崇左 | 晋中 | 如皋 | 朝阳 | 中山 | 邹城 | 宝应县 | 三沙 | 东阳 | 海安 | 广州 | 阳江 | 酒泉 | 四平 | 三河 | 温岭 | 章丘 | 济南 | 商洛 | 永康 | 龙口 | 黄南 | 迪庆 | 仁寿 | 德州 | 邹平 | 景德镇 | 汝州 | 德宏 | 桐城 | 无锡 | 东阳 | 贵州贵阳 | 石嘴山 | 驻马店 | 肥城 | 宣城 | 诸暨 | 四川成都 | 基隆 | 喀什 | 三明 | 玉溪 | 正定 | 攀枝花 | 海西 | 海南 | 沛县 | 白银 | 鸡西 | 邢台 | 泰州 | 广安 | 博尔塔拉 | 阳泉 | 永康 | 宜宾 | 六安 | 江苏苏州 | 日喀则 | 天长 | 宿州 | 五指山 | 运城 | 福建福州 | 衢州 | 厦门 | 沧州 | 大连 | 大庆 | 东莞 | 宝鸡 | 安徽合肥 | 滨州 | 六盘水 | 果洛 | 株洲 | 绥化 | 简阳 | 娄底 | 东莞 | 通辽 | 张家口 | 日土 | 垦利 | 衢州 | 阿勒泰 | 莱州 | 河源 | 库尔勒 | 邯郸 | 九江 | 山南 | 迪庆 | 贵州贵阳 | 靖江 | 海安 | 新沂 | 曲靖 | 岳阳 | 日喀则 | 湖南长沙 | 泗洪 | 汕头 | 锡林郭勒 | 葫芦岛 | 咸宁 | 达州 | 巴彦淖尔市 | 宜昌 | 海北 | 吴忠 | 湖北武汉 | 乐清 | 盐城 | 庄河 | 商丘 | 湛江 | 三明 | 泰兴 | 张北 | 咸阳 | 南平 | 黑龙江哈尔滨 | 湖北武汉 | 兴化 | 龙岩 | 安顺 | 长垣 | 阿拉尔 | 德宏 | 五指山 | 龙岩 | 顺德 | 南通 | 垦利 | 那曲 | 高雄 | 荆州 | 乌兰察布 | 蓬莱 | 招远 | 嘉兴 | 广饶 | 商洛 | 六盘水 | 河南郑州 | 白山 | 石嘴山 | 山西太原 | 大同 | 平凉 | 济南 | 新余 | 晋城 | 沭阳 | 安顺 | 德宏 | 海南海口 | 张家界 | 内蒙古呼和浩特 | 台北 | 博罗 | 海南 | 新余 | 乐清 | 宿迁 | 漯河 | 吐鲁番 | 厦门 | 吐鲁番 | 运城 | 招远 | 章丘 | 固原 | 昌都 | 图木舒克 | 惠州 | 邢台 | 临沧 | 长兴 | 衡阳 | 长垣 | 晋城 | 丽江 | 固原 | 阿勒泰 | 黑龙江哈尔滨 | 任丘 | 儋州 | 山南 | 神木 | 连云港 | 台北 | 鄂尔多斯 | 灵宝 | 单县 | 曲靖 | 吴忠 | 湘潭 | 中山 | 沛县 | 巴音郭楞 | 吕梁 | 嘉善 | 焦作 | 海丰 | 东莞 | 台南 | 永康 | 嘉兴 | 秦皇岛 | 威海 | 江西南昌 | 五指山 | 南安 | 大兴安岭 | 盘锦 | 渭南 | 台南 | 朔州 | 阳春 | 仁寿 | 金昌 | 平顶山 | 毕节 | 三门峡 | 张家口 | 乌兰察布 | 和县 | 建湖 | 青州 | 湖北武汉 | 陇南 | 定西 | 赣州 | 慈溪 | 三门峡 | 新疆乌鲁木齐 | 铁岭 | 乐清 | 日照 | 黑河 | 葫芦岛 | 贵州贵阳 | 益阳 | 南平 | 呼伦贝尔 | 宿迁 | 仁寿 | 商丘 | 鹰潭 | 文山 | 佛山 | 宝鸡 | 锦州 | 杞县 | 鹤岗 | 日土 | 宝鸡 | 乌兰察布 | 那曲 | 昌吉 | 资阳 | 廊坊 | 汕尾 | 桐城 | 甘肃兰州 | 儋州 | 灌南 | 北海 | 新沂 | 潮州 | 佛山 | 和田 | 鸡西 | 葫芦岛 | 新泰 | 菏泽 | 岳阳 | 仙桃 | 马鞍山 | 常德 | 厦门 | 克拉玛依 | 九江 | 陵水 | 诸暨 | 济南 | 喀什 | 阳泉 | 扬州 | 菏泽 | 日喀则 | 神木 | 宝鸡 | 台州 | 滨州 | 南阳 | 湘潭 | 沭阳 | 喀什 | 临汾 | 博罗 | 宣城 | 改则 | 汉川 | 澳门澳门 | 神木 | 庆阳 | 南平 | 清远 | 阳江 | 开封 | 黄南 | 林芝 | 阳江 | 保定 | 白山 | 博罗 | 来宾 | 南通 | 运城 | 齐齐哈尔 | 泸州 | 嘉峪关 | 中卫 | 甘南 | 铜川 | 安阳 | 临夏 | 汕尾 | 台山 | 阿拉善盟 | 安吉 | 抚顺 | 肇庆 | 盘锦 | 石嘴山 | 库尔勒 | 雄安新区 | 本溪 | 五家渠 | 湛江 | 大同 | 益阳 | 滁州 | 云南昆明 | 南安 | 赣州 | 白山 | 山南 | 昭通 | 铜仁 | 兴安盟 | 邯郸 | 潍坊 | 黄南 | 长兴 | 宜都 | 清徐 | 酒泉 | 恩施 | 喀什 | 贺州 | 杞县 | 阿坝 | 建湖 | 六盘水 | 山西太原 | 仁怀 | 梅州 | 濮阳 | 三明 | 果洛 | 台湾台湾 | 咸阳 | 荣成 | 泸州 | 桓台 | 镇江 | 洛阳 | 莒县 | 齐齐哈尔 | 荆门 | 邳州 | 岳阳 | 绵阳 | 常州 | 齐齐哈尔 | 吉林 | 新泰 | 沛县 | 娄底 | 鸡西 | 珠海 | 昆山 | 玉环 | 承德 | 安吉 | 甘孜 | 萍乡 | 荆门 | 承德 | 张掖 | 凉山 | 温州 | 南通 | 溧阳 | 葫芦岛 | 东阳 | 金华 | 忻州 | 菏泽 | 大庆 | 黄石 | 龙口 | 辽源 | 杞县 | 鹰潭 | 仁寿 | 宝鸡 | 遂宁 | 阿坝 | 海南 | 临汾 | 沧州 | 吐鲁番 | 苍南 | 兴化 | 张掖 | 日喀则 | 天门 | 铜陵 | 澳门澳门 | 大庆 | 阿勒泰 | 河南郑州 | 七台河 | 天长 | 苍南 | 河南郑州 | 百色 | 牡丹江 | 南充 | 池州 | 鹤壁 | 哈密 | 灌云 | 丹阳 | 阿里 | 保定 | 和田 | 济南 | 乐平 | 台州 | 那曲 | 三明 | 濮阳 | 如皋 | 亳州 | 山东青岛 | 毕节 | 五指山 | 林芝 | 宁夏银川 | 新泰 | 嘉峪关 | 偃师 | 晋城 | 宜都 | 鞍山 | 西双版纳 | 辽源 | 聊城 | 娄底 | 盘锦 | 青海西宁 | 陕西西安 | 鹰潭 | 惠东 | 梅州 | 武夷山 | 邹城 | 常德 | 芜湖 | 桐城 | 台湾台湾 | 章丘 | 诸暨 | 陵水 | 丽水 | 靖江 | 汕尾 | 邢台 | 鞍山 | 吕梁 | 义乌 | 惠州 | 泉州 | 长垣 | 蓬莱 | 正定 | 果洛 | 陵水 | 葫芦岛 | 莒县 | 莒县 | 黑河 | 靖江 | 伊犁 | 黄南 | 西双版纳 | 玉环 | 九江 | 天水 | 慈溪 | 怀化 | 六盘水 | 日喀则 | 伊犁 | 靖江 | 延安 | 清徐 | 芜湖 | 海北 | 山西太原 | 怒江 | 阿里 | 清远 | 沧州 | 河南郑州 | 抚顺 | 吉林长春 | 石狮 | 诸城 | 遂宁 | 四平 | 宁波 | 南平 | 阿克苏 | 宝鸡 | 平潭 | 攀枝花 | 七台河 | 衡水 | 延边 | 曲靖 | 澄迈 | 资阳 | 湖州 | 禹州 | 通化 | 福建福州 | 深圳 | 通化 | 天水 | 宁夏银川 | 临汾 | 东莞 | 莒县 | 苍南 | 台湾台湾 | 淮安 | 铜仁 | 雄安新区 | 贵州贵阳 | 张掖 | 衢州 | 永州 | 桓台 | 七台河 | 灵宝 | 漳州 | 马鞍山 | 莆田 | 毕节 | 蚌埠 | 漳州 | 景德镇 | 西藏拉萨 | 苍南 | 锡林郭勒 | 兴安盟 | 东莞 | 陵水 | 四川成都 | 安徽合肥 | 安徽合肥 | 绵阳 | 嘉峪关 | 阿勒泰 | 荣成 | 公主岭 | 衡阳 | 龙口 | 滕州 | 张家界 | 黄冈 | 任丘 | 乌海 | 海北 | 章丘 | 香港香港 | 临猗 | 毕节 | 阳春 | 苍南 | 葫芦岛 | 兴安盟 | 安徽合肥 | 六盘水 | 香港香港 | 仁寿 | 阳春 | 济源 | 肇庆 | 临夏 | 铜仁 | 海东 | 莒县 | 唐山 | 东方 | 德清 | 本溪 | 玉树 | 西藏拉萨 | 淮北 | 龙岩 | 平凉 | 大庆 | 昭通 | 吉林 | 绥化 | 澄迈 | 义乌 | 日喀则 | 黄石 | 鞍山 | 项城 | 肇庆 | 绍兴 | 三河 | 蓬莱 | 普洱 | 沭阳 | 阳江 | 西双版纳 | 西藏拉萨 | 乌海 | 萍乡 | 湖南长沙 | 高密 | 十堰 | 项城 | 许昌 | 章丘 | 正定 | 南通 | 三沙 | 张掖 | 遵义 | 广安 | 泸州 | 湛江 | 兴化 | 酒泉 | 锡林郭勒 | 芜湖 | 莒县 | 阳泉 | 盘锦 | 辽阳 | 五指山 | 达州 | 和县 | 抚顺 | 乳山 | 湖北武汉 | 朔州 | 晋城 | 姜堰 | 保亭 | 晋城 | 株洲 | 桓台 | 自贡 | 新沂 | 自贡 | 嘉峪关 | 临沧 | 南安 | 蚌埠 | 霍邱 | 湖州 | 松原 | 临夏 | 嘉兴 | 海宁 | 乌海 | 阿坝 | 洛阳 | 普洱 | 四川成都 | 常州 | 长垣 | 贵州贵阳 | 哈密 | 枣阳 | 醴陵 | 柳州 | 通辽 | 云南昆明 | 兴安盟 | 乐平 | 贺州 | 台中 | 德宏 | 招远 | 河源 | 甘南 | 乌海 | 阿拉尔 | 四川成都 | 滁州 | 大丰 | 嘉兴 | 瓦房店 | 单县 | 陕西西安 | 泰安 | 溧阳 | 广安 | 酒泉 | 辽源 | 红河 | 辽宁沈阳 | 长垣 | 文昌 | 东方 | 铜仁 | 牡丹江 | 南充 | 衢州 | 镇江 | 黔西南 | 诸城 | 岳阳 | 乐清 | 亳州 | 自贡 | 迪庆 | 大丰 | 舟山 | 江苏苏州 | 兴化 | 阳江 | 武安 | 乐山 | 丹东 | 嘉善 | 岳阳 | 公主岭 | 任丘 | 仁怀 | 永州 | 包头 | 招远 | 云南昆明 | 汕尾 | 五家渠 | 常州 | 嘉峪关 | 阿里 | 项城 | 晋中 | 宁夏银川 | 昌吉 | 鹤壁 | 莱芜 | 靖江 | 台湾台湾 | 台山 | 章丘 | 莆田 | 衢州 | 兴安盟 | 白银 | 安康 | 乐清 | 梅州 | 云浮 | 瑞安 | 泗阳 | 清徐 | 莱芜 | 郴州 | 宣城 | 临沂 | 毕节 | 金昌 | 燕郊 | 博尔塔拉 | 海拉尔 | 文山 | 宿州 | 本溪 | 大庆 | 孝感 | 江苏苏州 | 公主岭 | 慈溪 | 临海 | 开封 | 潜江 | 咸宁 | 武安 | 盘锦 | 如东 | 瑞安 | 沧州 | 鞍山 | 忻州 | 新余 | 鹰潭 | 张家界 | 白城 | 周口 |