当前位置主页 > 资料库 > 前端教程 > jquery展开收缩扑克牌动画效果教程

jquery展开收缩扑克牌动画效果教程

10-23

查看演示 下载地址

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文件中。

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

查看演示 下载地址

Previous:
上一篇:如何使用CSS制作Google Nexus 7网站侧边栏
Next:
下一篇:使用jquery.windy制作风吹卡片的效果 | jQuery教程
返回顶部