jQuery洗牌图片切换插件jquery.baraja

所属分类:媒体,其他-幻灯片和轮播图,动画效果

 36406  469  查看评论 (11)
分享到微信朋友圈
X
jQuery洗牌图片切换插件jquery.baraja ie兼容10

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

请注意,CSS转换和过渡只工作在浏览器支持他们。兼容ie10以上

使用插件,创建一个ul的无序列表,当然这里的iD是元素获取的ID可以更换,即在我们的演示中我们使用:

<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();

以下是触发使用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
    } );
} );

选项

The following default options are available:

// the options
$.Baraja.defaults = {
    // 如果我们想指定一个选择器,触发next()功能。例如:'#baraja-nav-next'
    nextEl : '',
    // 如果我们想指定一个选择器,触发previous()功能
    prevEl : '',
    // 默认的切换速度
    speed : 300,
    // 默认过渡类型
    easing : 'ease-in-out'
};

旋转方法的默认设置如下:

this.fanSettings = {
    // 开启/关闭速度
    speed : 500,
    // 开启/关闭
    easing : 'ease-out',
    // 项目将有可能的角度的差异/范围
    range : 90,
    // 这定义了第一个项目的位置
    direction : 'right',
    // 变化的位置
    origin : { x : 25, y : 100 },
    // 变化的方式
    translation : 0,
    // 已中心开始变化效果
    // is applied
    center : true,
    // 变化结束停止
    scatter : false
};

基本造型是在baraja.css文件中定义的,你可以看到在Custom.css定制风格的一个例子。

演示包含了许多扩展的可能性的例子,它也包含了一个导航,一个如何添加更多的项目和一个关闭按钮,将触发甲板上的物品被带回他们的“关闭”状态的一个例子。单击第一个项目也将触发甲板关闭。点击甲板上的一个项目将使它出现在甲板上。

请注意,这取决于你有多少个项目,他们会高兴地传播,根据设置的参数。因为项目是绝对的,他们只会溢出来,所以你可能想确保他们呆在视口。你将能够看到,在一些例子中的演示。


相关插件-幻灯片和轮播图,动画效果

自制炫酷的图片轮换效果插件

自制炫酷的图片轮换效果 响应式,自适应
  幻灯片和轮播图
 33673  345

点击 放大 焦点图

点击箭头内容放大
  幻灯片和轮播图
 51593  479

js商品详情轮播图

产品组图展示,自动轮播图
  幻灯片和轮播图
 38863  366

基于swiper的两边叠加轮播图

基于swiper的两边叠加,渐渐缩小的轮播图,支持移动端
  幻灯片和轮播图
 41632  316

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    马 立峰 0
    2019/8/30 11:13:45
    taylor 0
    2018/3/16 14:58:55
    牛逼!!!!!!!!!!!!!!!! 回复
    527658433 0
    2017/2/10 17:46:23
    DarkTobey 0
    2017/1/13 16:01:35
    Rewrite°北寂 0
    2016/12/26 17:12:31
    此用户名无法显示 0
    2016/12/20 16:12:28
    ──╄OvЁ灬小跟班 0
    2016/12/1 14:12:28
    红尘客栈 0
    2016/11/23 11:11:18
    鼓掌  非常厉害 回复
    doctype_html 0
    2016/11/22 8:11:05
    xnmatm 0
    2016/11/17 17:11:20
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复