图片/图形

风吹图片堆叠图片切换效果jQuery插件

阿里云


Windy 是一款 jquery 堆叠图片切换效果插件。这个 jquery 堆叠图片切换效果每次在图片切换的时候,图片就像是被风吹飞一样。Windy 共有三种效果,每一种都非常有趣。Windy 这个 jquery 插件能够用来做一种卡片像是被风吹飞的效果。这种效果就像是一幅扑克牌被风吹飞了顶面上的第一张扑克。通过使用 Windy 和 CSS 3D transforms、transitions,你能够做出一种卡片被风吹飞的图片切换效果。

HTML 结构:

创建一个无序列表,给它加上 class wi-container。

也想出现在这里?联系我们
创客主机
  1. <ul id="wi-el" class="wi-container">
  2.     <li>
  3.         <img src="images/demo1/1.jpg" alt="image1">
  4.         <h4>Coco Loko</h4>
  5.         <p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>
  6.     </li>
  7.     <li> <!-- ... --> </li>
  8.     <li> <!-- ... --> </li>
  9.     <li> <!-- ... --> </li>
  10.     <!-- ... -->
  11. </ul>

调用插件

  1. $( '#wi-el' ).windy();

可用参数

  1. // the options
  2. $.Windy.defaults = {
  3.     // if we want to specify a selector that triggers the next() function. Example: '#wi-nav-next'.
  4.     nextEl : '',
  5.     // if we want to specify a selector that triggers the prev() function.
  6.     prevEl : '',
  7.     // rotation and translation boundaries for the items transitions
  8.     boundaries : {
  9.         rotateX : { min : 40 , max : 90 },
  10.         rotateY : { min : -15 , max : 15 },
  11.         rotateZ : { min : -10 , max : 10 },
  12.         translateX : { min : -200 , max : 200 },
  13.         translateY : { min : -400 , max : -200 },
  14.         translateZ : { min : 250 , max : 550 }
  15.     }
  16. };

boundaries 定义了扑克牌“分离”或者说是“被吹飞”的值。Windy 插件将会随机在这个范围中选一个值。下面的方法是可用的导航方法。

next()

prev()

navigate(position)
如果你想了解更多导航的方法,在下载压缩包的 demo 中有三个例子,两个使用箭头按钮导航和一个使用 jQuery UI 做的滑动条导航。插件的 css 样式都定义在 windy.css 样式文件中。教程就到这里,希望对你有所帮助。

风吹图片堆叠图片切换效果 jQuery 插件

已有 410 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!