插件描述：windy 是一个jQuery插件,使用CSS 3D变换和转换来略过一堆物品从而实现快速导航。连续导航的效果就是提醒一副牌或表单快点飞走,因此得名Windy。这个插件的想法是受CSS着色器示例 的影响。使用这个插件时需要一个无序列表的class：“wi-container”
windy 是一个jQuery插件,使用CSS 3D变换和转换来略过一堆物品从而实现快速导航。连续导航的效果就是提醒一副牌或表单快点飞走,因此得名Windy。这个插件的想法是受CSS着色器示例 的影响。
请注意：当前插件只支持以下浏览器.
alt="" style="border: 0px; color: rgb(114, 114, 114); font-family: Simsun; font-size: 14px; line-height: 24px; white-space: normal; background-color: rgb(228, 230, 229);"/>
预览图
style="float:none;" title="4fb69195-1c4e-4c9a-b528-814905b8ed99.jpg"/>
style="float:none;" title="4fb69195-1c4e-4c9a-b528-814905b8ed992.jpg"/>
style="float:none;" title="4fb69195-1c4e-4c9a-b528-814905b8ed9923.jpg"/>
使用步骤
使用这个插件时需要一个无序列表的class：“wi-container”
1 2 3 4 5 6 7 8 9 10 11 | <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</p> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <!-- ... --> </ul> |
可以这样调用：
1 | $( '#wi-el' ).windy(); |
下面是可选项：
1 2 3 4 5 6 7 8 9 10 11 12 13 | // the options$.Windy.defaults = { nextEl : '', prevEl : '', boundaries : { 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 } }}; |
这些公共的方法，可以用来连接导航元素：
next()
prev()
navigate(position)
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 回到顶端插件(返回顶部) - ScrollUp
- 下一个特效： 全屏布局页转换jquery+css3