实例代码
<div class="container"> <header class="clearfix"> <h1>Baraja <span>洗牌图片切换特效</span></h1> </header> <section class="main"> <nav class="actions"> <span id="nav-fan">Fan right</span> <span id="nav-fan2">Fan left</span> <span id="nav-fan3">Fan right (asym.)</span> <span id="nav-fan4">Fan left (asym.)</span> <span id="nav-fan5">Rotated spread (horizontal)</span> <span id="nav-fan6">Rotated spread (vertical)</span> <span id="nav-fan7">Linear spread right</span> <span id="nav-fan8">Linear spread left</span> <span id="nav-fan9">Linear spread right (irregular)</span> <span id="nav-fan10">Linear spread left (irregular)</span> <span id="nav-fanOther1">other</span> <span id="nav-fanOther2">other</span> <span id="nav-fanOther3">other</span> <span id="nav-fanOther4">other...</span> <span id="add">Add items</span> </nav> <div class="baraja-demo"> <ul id="baraja-el" class="baraja-container"> <li><img src="/api/jq/baraja/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="/api/jq/baraja/images/2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li> <li><img src="/api/jq/baraja/images/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li> <li><img src="/api/jq/baraja/images/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li> <li><img src="/api/jq/baraja/images/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li> <li><img src="/api/jq/baraja/images/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li> <li><img src="/api/jq/baraja/images/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li> <li><img src="/api/jq/baraja/images/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li> <li><img src="/api/jq/baraja/images/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li> <li><img src="/api/jq/baraja/images/10.jpg" alt="image10"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li> <li><img src="/api/jq/baraja/images/11.jpg" alt="image11"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li> <li><img src="/api/jq/baraja/images/12.jpg" alt="image12"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li> <li><img src="/api/jq/baraja/images/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li> <li><img src="/api/jq/baraja/images/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li> <li><img src="/api/jq/baraja/images/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li> <li><img src="/api/jq/baraja/images/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li> <li><img src="/api/jq/baraja/images/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li> <li><img src="/api/jq/baraja/images/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li> </ul> </div> <nav class="actions light"> <span id="nav-prev"><</span> <span id="nav-next">></span> <span id="close">close</span> </nav> </section> </div> <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/api/jq/baraja/js/jquery.baraja.js"></script> <script type="text/javascript"> $(function() { var $el = $('#baraja-el'), baraja = $el.baraja(); // navigation $('#nav-prev').on('click', function(event) { baraja.previous(); }); $('#nav-next').on('click', function(event) { baraja.next(); }); // close the baraja $('#close').on('click', function(event) { baraja.close(); }); // example of how to add more items $('#add').on('click', function(event) { if ($(this).hasClass('disabled')) { return false; } $(this).addClass('disabled'); baraja.add($('<li><img src="/api/jq/baraja/images/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li><li><img src="/api/jq/baraja/images/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li><li><img src="/api/jq/baraja/images/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li><li><img src="/api/jq/baraja/images/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>')); }); }); </script>
相关推荐
插件描述:jquery.baraja是一个很有意思的jquery洗牌图片切换插件。演示地址:http://www.jq22.com/jquery-info10713
jquery.baraja是一个很有意思的jquery洗牌图片切换插件。这个洗牌图片切换插件将图片堆叠在一起像一幅扑克一样,点击按钮可以将它展开,最下面的图片被切换到上面,展开时也可以选择其中一张放到最上面。
CSS3 HTML5 jquery.baraja.js打造的扑克牌特效,围绕成扇形(半圆形)的扑克牌,而且还融合了众多的纸牌展开效果,利用jquery.baraja.js插件所生成的效果,你可快速开发出基于扑克牌的HTML5游戏应用。
有几种可用的选项,可以创建各种散布的物品,例如,横向移动物品或以扇形方式旋转物品。 查看以获取使用示例。 依存关系 安装 使用添加到现有的项目。 $ yarn add vue-baraja-js 用法 import * as Vue from 'vue'...
有几种可用的选项,可以创建各种散布的物品,例如,横向移动物品或以扇形方式旋转物品。 查看以获取使用示例。 依存关系 安装 使用添加到现有的项目中。 $ yarn add react-baraja-js 用法 import React from '...
Java程序来洗牌,并查看哪个是顶牌。 Carta对象存储在Stack ,可以轻松地在字母末尾添加字母并一一删除。 特征 随机洗牌(向卡组中添加一些随机卡) 拿起最后一张卡(出示并将其从卡座中丢弃) 方法 生成将其添加到...
javascript即用特效。大量实例可以直接用到开发中,也可以个人学习提高。。。
css3 + html5超炫的效果,让你赏心悦目,心旷神怡
PHP手册内容
:package: 安装和基本用法可以使用来安装此软件包,该软件包也是Baraja 一部分。 如果不使用它,则必须按照本指南手动安装软件包。 可以在包根目录内的common.neon文件中找到模型配置。 要手动安装软件包,请调用...
例子 ...主意 该库非常快速地比较两个文本文件,并返回具有差异的对象。...$ diff = ( new \ Baraja \ DiffGenerator \ SimpleDiff )-> compare ( $ left , $ right ); // simple render diff echo '<code><pre>' . htm