'视差滑块'没有显示在div中

时间：2017-12-29 22:07:22

标签： javascript html image slider jquery-ui-slider

My website

但滑块的div中没有​​任何内容！我已经仔细检查了所有内容，一切都很酷......我在所有文件夹中粘贴了'jquery.cslider'文件，试图让它工作......这是我的HTML代码：

Calculate

2 个答案:

答案 0 :(得分：0)

这是'jquery.cslider'文件的代码：

(function( $, undefined ) {

/*
 * Slider object.
 */
$.Slider                = function( options, element ) {

    this.$el    = $( element );

    this._init( options );

};

$.Slider.defaults       = {
    current     : 0,    // index of current slide
    bgincrement : 50,   // increment the bg position (parallax effect) when sliding
    autoplay    : false,// slideshow on / off
    interval    : 4000  // time between transitions
};

$.Slider.prototype  = {
    _init               : function( options ) {

        this.options        = $.extend( true, {}, $.Slider.defaults, options );

        this.$slides        = this.$el.children('div.da-slide');
        this.slidesCount    = this.$slides.length;

        this.current        = this.options.current;

        if( this.current < 0 || this.current >= this.slidesCount ) {

            this.current    = 0;

        }

        this.$slides.eq( this.current ).addClass( 'da-slide-current' );

        var $navigation     = $( '<nav class="da-dots"/>' );
        for( var i = 0; i < this.slidesCount; ++i ) {

            $navigation.append( '<span/>' );

        }
        $navigation.appendTo( this.$el );

        this.$pages         = this.$el.find('nav.da-dots > span');
        this.$navNext       = this.$el.find('span.da-arrows-next');
        this.$navPrev       = this.$el.find('span.da-arrows-prev');

        this.isAnimating    = false;

        this.bgpositer      = 0;

        this.cssAnimations  = Modernizr.cssanimations;
        this.cssTransitions = Modernizr.csstransitions;

        if( !this.cssAnimations || !this.cssAnimations ) {

            this.$el.addClass( 'da-slider-fb' );

        }

        this._updatePage();

        // load the events
        this._loadEvents();

        // slideshow
        if( this.options.autoplay ) {

            this._startSlideshow();

        }

    },
    _navigate           : function( page, dir ) {

        var $current    = this.$slides.eq( this.current ), $next, _self = this;

        if( this.current === page || this.isAnimating ) return false;

        this.isAnimating    = true;

        // check dir
        var classTo, classFrom, d;

        if( !dir ) {

            ( page > this.current ) ? d = 'next' : d = 'prev';

        }
        else {

            d = dir;

        }

        if( this.cssAnimations && this.cssAnimations ) {

            if( d === 'next' ) {

                classTo     = 'da-slide-toleft';
                classFrom   = 'da-slide-fromright';
                ++this.bgpositer;

            }
            else {

                classTo     = 'da-slide-toright';
                classFrom   = 'da-slide-fromleft';
                --this.bgpositer;

            }

            this.$el.css( 'background-position' , this.bgpositer * this.options.bgincrement + '% 0%' );

        }

        this.current    = page;

        $next           = this.$slides.eq( this.current );

        if( this.cssAnimations && this.cssAnimations ) {

            var rmClasses   = 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
            $current.removeClass( rmClasses );
            $next.removeClass( rmClasses );

            $current.addClass( classTo );
            $next.addClass( classFrom );

            $current.removeClass( 'da-slide-current' );
            $next.addClass( 'da-slide-current' );

        }

        // fallback
        if( !this.cssAnimations || !this.cssAnimations ) {

            $next.css( 'left', ( d === 'next' ) ? '100%' : '-100%' ).stop().animate( {
                left : '0%'
            }, 1000, function() { 
                _self.isAnimating = false; 
            });

            $current.stop().animate( {
                left : ( d === 'next' ) ? '-100%' : '100%'
            }, 1000, function() { 
                $current.removeClass( 'da-slide-current' ); 
            });

        }

        this._updatePage();

    },
    _updatePage         : function() {

        this.$pages.removeClass( 'da-dots-current' );
        this.$pages.eq( this.current ).addClass( 'da-dots-current' );

    },
    _startSlideshow     : function() {

        var _self   = this;

        this.slideshow  = setTimeout( function() {

            var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
            _self._navigate( page, 'next' );

            if( _self.options.autoplay ) {

                _self._startSlideshow();

            }

        }, this.options.interval );

    },
    page                : function( idx ) {

        if( idx >= this.slidesCount || idx < 0 ) {

            return false;

        }

        if( this.options.autoplay ) {

            clearTimeout( this.slideshow );
            this.options.autoplay   = false;

        }

        this._navigate( idx );

    },
    _loadEvents         : function() {

        var _self = this;

        this.$pages.on( 'click.cslider', function( event ) {

            _self.page( $(this).index() );
            return false;

        });

        this.$navNext.on( 'click.cslider', function( event ) {

            if( _self.options.autoplay ) {

                clearTimeout( _self.slideshow );
                _self.options.autoplay  = false;

            }

            var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
            _self._navigate( page, 'next' );
            return false;

        });

        this.$navPrev.on( 'click.cslider', function( event ) {

            if( _self.options.autoplay ) {

                clearTimeout( _self.slideshow );
                _self.options.autoplay  = false;

            }

            var page = ( _self.current > 0 ) ? page = _self.current - 1 : page = _self.slidesCount - 1;
            _self._navigate( page, 'prev' );
            return false;

        });

        if( this.cssTransitions ) {

            if( !this.options.bgincrement ) {

                this.$el.on( 'webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider', function( event ) {

                    if( event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4' ) {

                        _self.isAnimating   = false;

                    }   

                });

            }
            else {

                this.$el.on( 'webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider', function( event ) {

                    if( event.target.id === _self.$el.attr( 'id' ) )
                        _self.isAnimating   = false;

                });

            }

        }

    }
};

var logError            = function( message ) {
    if ( this.console ) {
        console.error( message );
    }
};

$.fn.cslider            = function( options ) {

    if ( typeof options === 'string' ) {

        var args = Array.prototype.slice.call( arguments, 1 );

        this.each(function() {

            var instance = $.data( this, 'cslider' );

            if ( !instance ) {
                logError( "cannot call methods on cslider prior to initialization; " +
                "attempted to call method '" + options + "'" );
                return;
            }

            if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                logError( "no such method '" + options + "' for cslider instance" );
                return;
            }

            instance[ options ].apply( instance, args );

        });

    } 
    else {

        this.each(function() {

            var instance = $.data( this, 'cslider' );
            if ( !instance ) {
                $.data( this, 'cslider', new $.Slider( options, this ) );
            }
        });

    }

    return this;

};

})( jQuery );

答案 1 :(得分：0)

这是'paralax_slider.css'文件的代码

.da-slider{
    width:947px !important;
    height:290px !important;
    border:1px solid #341d1d;
    background:#0d0d0d;
    margin-left:5px !important; 
    margin-top:15px;
    -moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.8);

    width: 100%;
    min-width: 947px;
    position: relative;
    overflow: hidden;
    background: transparent url(../images/paralax_banner/waves.gif) repeat 0% 0%;
    -webkit-transition: background-position 1s ease-out 0.3s;
    -moz-transition: background-position 1s ease-out 0.3s;
    -o-transition: background-position 1s ease-out 0.3s;
    -ms-transition: background-position 1s ease-out 0.3s;
    transition: background-position 1s ease-out 0.3s;
}
.da-slide{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;
}
.da-slide-current{
    z-index: 1000;
}
.da-slider-fb .da-slide{
    left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
    left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-img{
    position: absolute;
    opacity: 0;
    left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p{
    left: 10%;
    opacity: 1;
}
.da-slider-fb .da-slide .da-img{
    left: 400px;
    opacity: 1;
}
.da-slide h2{
    color: #fff;
    font-size: 50px;
    width: 50%;
    top: 15px;
    white-space: nowrap;
    z-index: 10;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    font-family: 'Economica', Arial, sans-serif;
    font-weight: 700;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
}
.da-slide p{
    width: 45%;
    top: 115px;
    color: #cc9999;
    font-size: 16px;
    line-height: 26px;
    height: 80px;
    overflow: hidden;
    font-family: 'Economica', Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
    z-index:99;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
}
.da-slide .da-img{
    text-align: center;
    width: 30%;
    top: 0px;
    height: 256px;
    line-height: 320px;
    left: 400pxpx; /*400px*/
    z-index:1;
}
.da-slide .da-link{
    color: #fff;
    text-decoration:none;
    transition:all 0.35s ease-in-out;
    /* Firefox 4 */
    -moz-transition:all 0.35s ease-in-out;
    /* Safari and Chrome */
    -webkit-transition:all 0.35s ease-in-out;
    /* Opera */
    -o-transition:all 0.35s ease-in-out;
}
.da-slide .da-link:hover{
    color:#ff2a2a;
    text-decoration:none;
    transition:all 0.35s ease-in-out;
    /* Firefox 4 */
    -moz-transition:all 0.35s ease-in-out;
    /* Safari and Chrome */
    -webkit-transition:all 0.35s ease-in-out;
    /* Opera */
    -o-transition:all 0.35s ease-in-out;
}
.da-dots{
    width: 100%;
    position: absolute;
    text-align: center;
    left: 0px;
    bottom: 20px;
    z-index: 2000;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.da-dots span{
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d41e1a;
    margin: 3px;
    cursor: pointer;
    box-shadow: 
        1px 1px 1px rgba(0,0,0,0.1) inset, 
        1px 1px 1px rgba(255,255,255,0.1);
}
.da-dots span.da-dots-current:after{
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: #5e0101;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
.da-arrows{
    -moz-user-select: none;
    -webkit-user-select: none;
}
.da-arrows span{
    position: absolute;
    top: 50%;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background:none;
    cursor: pointer;
    z-index: 2000;
    opacity: 0;
    box-shadow: 
        1px 1px 1px rgba(0,0,0,0.1) inset, 
        1px 1px 1px rgba(255,255,255,0.1);
    -webkit-transition: opacity 0.4s ease-in-out-out 0.2s;
    -moz-transition: opacity 0.4s ease-in-out-out 0.2s;
    -o-transition: opacity 0.4s ease-in-out-out 0.2s;
    -ms-transition: opacity 0.4s ease-in-out-out 0.2s;
    transition: opacity 0.4s ease-in-out-out 0.2s;
}
.da-slider:hover .da-arrows span{
    opacity: 1;
}
.da-arrows span:after{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background: transparent url(../images/paralax_banner/arrows.png) no-repeat top left;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.da-arrows span:hover:after{
    box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.da-arrows span:active:after{
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.da-arrows span.da-arrows-next:after{
    background-position: top right;
}
.da-arrows span.da-arrows-prev{
    left: 15px;
}
.da-arrows span.da-arrows-next{
    right: 15px;
}

.da-slide-current h2,
.da-slide-current p{
    left: 10%;
    opacity: 1;
}
.da-slide-current .da-img{
    left: 400px;
    opacity: 1;
}
/* Animation classes and animations */

/* Slide in from the right*/
.da-slide-fromright h2{
    -webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    -moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    -o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    -ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright p{
    -webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    -moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    -o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    -ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .da-img{
    -webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    -moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    -o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    -ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-moz-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-o-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-ms-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}
/* Slide in from the left*/
.da-slide-fromleft h2{
    -webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft p{
    -webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
}

.da-slide-fromleft .da-img{
    -webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-moz-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-o-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-ms-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}
/* Slide out to the right */
.da-slide-toright h2{
    -webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright p{
    -webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    animation: toRightAnim2 0.6s ease-in-out 0.3s both;
}

.da-slide-toright .da-img{
    -webkit-animation: toRightAnim4 0.6s ease-in-out both;
    -moz-animation: toRightAnim4 0.6s ease-in-out both;
    -o-animation: toRightAnim4 0.6s ease-in-out both;
    -ms-animation: toRightAnim4 0.6s ease-in-out both;
    animation: toRightAnim4 0.6s ease-in-out both;
}
@-webkit-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-moz-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-o-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-ms-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
/* Slide out to the left*/
.da-slide-toleft h2{
    -webkit-animation: toLeftAnim1 0.6s ease-in-out both;
    -moz-animation: toLeftAnim1 0.6s ease-in-out both;
    -o-animation: toLeftAnim1 0.6s ease-in-out both;
    -ms-animation: toLeftAnim1 0.6s ease-in-out both;
    animation: toLeftAnim1 0.6s ease-in-out both;
}
.da-slide-toleft p{
    -webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toleft .da-img{
    -webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
}
@-webkit-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-moz-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-o-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-ms-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}
相关问题
最新问题