基于Jquery和html5实现炫酷的3D焦点图动画

2020-05-27 18:09:57易采站长站整理

'-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' ) {