当前位置：首页 > 网页特效 > 图片特效

3种风吹图片jquery堆叠图片切换效果插件

分类：图片特效日期：2024-05-14 点击(3) 评论(0)

简介

##### HTML结构:
创建一个无序列表，给它加上class wi-container。
```html
<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>
```
##### 调用插件
```html
$( '#wi-el' ).windy();
```
##### 可用参数
```html
// 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 transitions
 
    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 }
 
    }
 
};
```
boundaries定义了扑克牌“分离”或者说是“被吹飞”的值。Windy插件将会随机在这个范围中选一个值。

下面的方法是可用的导航方法。

-  next()
- prev()
-  navigate(position)

如果你想了解更多导航的方法，在下载压缩包的demo中有三个例子，两个使用箭头按钮导航和一个使用jQuery UI做的滑动条导航。

插件的css样式都定义在windy.css样式文件中。