转载自http://www.sd131.com/jquery-info156
windy 是一个jQuery插件,使用CSS 3D变换和转换来略过一堆物品从而实现快速导航。连续导航的效果就是提醒一副牌或表单快点飞走,因此得名Windy。这个插件的想法是受CSS着色器示例 的影响。
插件信息
请注意:当前插件只支持以下浏览器.
预览图
使用步骤
使用这个插件时需要一个无序列表的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</
p
>
</
li
>
<
li
>
<!-- ... -->
</
li
>
<
li
>
<!-- ... -->
</
li
>
<
li
>
<!-- ... -->
</
li
>
<!-- ... -->
</
ul
>
|
可以这样调用:
$( '#wi-el' ).windy();
|
下面是可选项:
// 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)