html5点击展开动画效果,jquery展开收缩扑克牌动画效果教程

Baraja是一个很有趣的jQuery插件。它允许你像在桌子上摊开扑克牌一样将元素展开和收缩。它使用CSS transforms来旋转和translate这些元素。它使用几个可用参数来控制各种不同的展开效果，比如横向移动扑克牌并像开扇子一样旋转它们。

注意：不是每一个浏览器都支持CSS transforms和transitions。

HTML结构:

要使用jquery.Baraja插件，必须使用一个无序列表，并给它一个classbaraja-container。

• 

  Coco Loko

  Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.

调用插件：

$( '#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'

};

可用的方法有：fan(), next(), previous(), close(), add()

将扑克牌设置为扇形的方法如下：

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

};

基本的样式都写在baraja.css文件中。

在下载包中列举了许多不同的例子，你可以下载来研究他们。