图片/图形
风吹图片堆叠图片切换效果jQuery插件
PetitQ
Windy 是一款 jquery 堆叠图片切换效果插件。这个 jquery 堆叠图片切换效果每次在图片切换的时候，图片就像是被风吹飞一样。Windy 共有三种效果，每一种都非常有趣。Windy 这个 jquery 插件能够用来做一种卡片像是被风吹飞的效果。这种效果就像是一幅扑克牌被风吹飞了顶面上的第一张扑克。通过使用 Windy 和 CSS 3D transforms、transitions，你能够做出一种卡片被风吹飞的图片切换效果。
HTML 结构:
创建一个无序列表，给它加上 class wi-container。
也想出现在这里？联系我们吧
<ul id="wi-el" class="wi-container">
<li>
<img src="images/demo1/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>
调用插件
$( '#wi-el' ).windy();
可用参数
// the options$.Windy.defaults = {
// if we want to specify a selector that triggers the next() function. Example: '#wi-nav-next'.nextEl : '',
// if we want to specify a selector that triggers the prev() function.prevEl : '',
// rotation and translation boundaries for the items transitionsboundaries : {
rotateX : { min : 40 , max : 90 },
rotateY : { min : -15 , max : 15 },
rotateZ : { min : -10 , max : 10 },
translateX : { min : -200 , max : 200 },
translateY : { min : -400 , max : -200 },
translateZ : { min : 250 , max : 550 }
}};
boundaries 定义了扑克牌“分离”或者说是“被吹飞”的值。Windy 插件将会随机在这个范围中选一个值。下面的方法是可用的导航方法。
next()
prev()
navigate(position)
如果你想了解更多导航的方法，在下载压缩包的 demo 中有三个例子，两个使用箭头按钮导航和一个使用 jQuery UI 做的滑动条导航。插件的 css 样式都定义在 windy.css 样式文件中。教程就到这里，希望对你有所帮助。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
