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

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

 42429  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样式文件中。

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

移动端仿淘宝造物节3d

html5场景淘宝造物节3D酷炫空间专题页面模板
  图片展示
 31790  476

javascript动感相册

javascript实现动感相册,放大缩小,不依赖其它库
  图片展示
 48705  393

图片点击放大并居中显示

纯js实现的一个图片点击放大并居中显示的插件,支持自定义图片详情,可作为图片浏览插件,也可自行改写
  图片展示
 53387  356

jQuery圆形转动切换文字

jQuery实现头像和文字的切换,并且伴随着圆环的转动,很有趣的效果
  图片展示
 32529  514

讨论这个项目(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
    很不错的东西哦,赶紧下,免得又收费 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复