Baraja是一个很有趣的jQuery插件。它允许你像在桌子上摊开扑克牌一样将元素展开和收缩。它使用CSS transforms来旋转和translate这些元素。它使用几个可用参数来控制各种不同的展开效果,比如横向移动扑克牌并像开扇子一样旋转它们。
注意:不是每一个浏览器都支持CSS transforms和transitions。
HTML结构:
要使用jquery.Baraja插件,必须使用一个无序列表,并给它一个classbaraja-container
。
<ul id="baraja-el" class="baraja-container"> <li> <img src="images/1.jpg" alt="image1"/> <h4>Coco Loko</h4> <p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <!-- ... --> </ul>
调用插件:
$( '#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文件中。
在下载包中列举了许多不同的例子,你可以下载来研究他们。