Baraja是一款洗牌插件,它支持自定义打开纸牌速度、动画效果、方向、坐标设置、展开角度范围等。包括它还可以切换切换上一张和下一张纸牌,并且可恢复到初始状态。
洗牌列表html代码
<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><img src="images/2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
</ul>
上、下一张牌纸和恢复按钮html代码
<nav class="actions light">
<span id="nav-prev"><</span>
<span id="nav-next">></span>
<span id="close">close</span>
</nav>
初始化按钮
引入baraja相关纸牌插件
<link rel="stylesheet" type="text/css" href="css/baraja.css" />
<script type="text/javascript" src="js/jquery.baraja.js"></script>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<span id="nav-fan">Fan right</span>
var $el = $('#baraja-el'),
baraja = $el.baraja();
$('#nav-fan').on('click', function(event) {
baraja.fan({
speed: 500,
easing: 'ease-out',
range: 90,
direction: 'right',
origin: {x: 25, y: 100},
center: true
});
});
上一张纸牌
$('#nav-prev').on('click', function(event) {
baraja.previous();
});
下一张纸牌
$('#nav-next').on('click', function(event) {
baraja.next();
});
恢复纸牌初始状态
$('#close').on('click', function(event) {
baraja.close();
});
barajaAPI教程
参数 | 描述 | 默认值 |
speed | 打开纸牌速度 毫秒 | 500 |
easing | 动画效果 | ease-out |
range | 展开角度范围 | - |
direction | 打开纸牌方向 | left |
origin | {minX: 20, maxX: 80, y: 100} | - |
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791