jQuery+css3洗牌图片切换特效

$( '#baraja-el' ).baraja();

$( '#some-button' ).on( 'click', function( event ) {

    baraja.fan( {

        speed : 500,

        easing : 'ease-out',

        range : 90,

        direction : 'right',

        origin : { x : 25, y : 100 },

        center : true,

        translation : 0

    } );

} );

$.Baraja.defaults = {

    // if we want to specify a selector that triggers the next() function. example: '#baraja-nav-next'

    nextEl : '',

    // if we want to specify a selector that triggers the previous() function

    prevEl : '',

    // default transition speed

    speed : 300,

    // default transition easing

    easing : 'ease-in-out'

};

this.fanSettings = {

    // speed for opening/closing

    speed : 500,

    // easing for opening/closing

    easing : 'ease-out',

    // difference/range of possible angles that the items will have

    // example: with range:90 and center:false the first item

    // will have 0deg and the last one 90deg;

    // if center:true, then the first one will have 45deg

    // and the last one -45deg; in both cases the difference is 90deg

    range : 90,

    // this defines the position of the first item 

    // (to the right, to the left)

    // and its angle (clockwise / counterclockwise)

    direction : 'right',

    // transform origin:

    // you can also pass a minX and maxX, meaning the left value 

    // will vary between minX and maxX 

    origin : { x : 25, y : 100 },

    // additional translation of each item

    translation : 0,

    // if the cards should be centered after the transform 

    // is applied

    center : true,

    // add a random factor to the final transform

    scatter : false

};