Baraja演示15种不同的洗牌特效

实例演示

 下载地址

实例代码

 实例演示 实例代码 <div >      <header >        <h1>Baraja <span>洗牌图片切换特效</span></h1>      </header>      <section >        <nav >          <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 >          <ul id="baraja-el" >            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/1.jpg" /><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/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/2.jpg" /><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/3.jpg" /><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/4.jpg" /><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/5.jpg" /><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/6.jpg" /><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/7.jpg" /><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/8.jpg" /><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/9.jpg" /><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/10.jpg" /><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/11.jpg" /><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/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/12.jpg" /><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/3.jpg" /><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/4.jpg" /><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/5.jpg" /><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/6.jpg" /><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/7.jpg" /><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>            <li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/8.jpg" /><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>          </ul>        </div>        <nav >          <span id="nav-prev"><</span>          <span id="nav-next">></span>          <span id="close">close</span>        </nav>      </section>    </div>    <script src='/images/loading.gif' data-original="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>    <script type="text/javascript" src='/images/loading.gif' data-original="http://www.cnblogs.com//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='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/6.jpg" /><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li><li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/7.jpg" /><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li><li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/8.jpg" /><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li><li><img src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/baraja/images/9.jpg" /><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>'));        });      });    </script>   

原标题：Baraja演示15种不同的洗牌特效

关键词：