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

所属分类:媒体-图片展示,图像

 41818  447  查看评论 (3)
分享到微信朋友圈
X
3种风吹图片jquery堆叠图片切换效果插件 ie兼容10

注意:不是每一个浏览器都支持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 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样式文件中。

相关插件-图片展示,图像

html5极速3D立体式图片相册切换效果

html5极速3D立体式图片相册切换效果
  图片展示
 90270  811

立体图片展示

图片随鼠标转向
  图片展示
 34554  482

移动端图片缩放插件Pinchzoom.js

此插件功能包括手机轮播,图片点击放大再次点击缩小功能
  图片展示
 99953  398

Apple TV的海报视差效果

CSS和jQuery重现这种现象
  图片展示
 31934  419

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Alex 0
    2017/8/26 11:37:51

    想问你下如何设置循环播放

    回复
    0
    2016/10/26 19:10:30
    Just 0
    2015/3/4 17:04:41
    很不错的东西哦,赶紧下,免得又收费 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复