[插件]jquery.flip实现360度翻转效果 jquery.slicebox实现3D翻转效果

分类:Javascript| 发布:camnprbubuol| 查看: | 发表时间:2013/8/6

jquery.flip介绍:

Flip!是一个能够让任意HTML、文本或jQuery Element产生漂亮翻转效果的jQuery插件。可以配置翻转方向:从右到左、上到下或从左到右、下到上。翻转的速度也可以配置。 jquery.flip上到下翻滚
查看简单的翻滚效果

Flip需要引用:jQuery (必须的,最低版本1.3.2) jQueryUI(必须的:core + effects core)

兼容性

兼容于:Firefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8)

Flip 使用很简单,只需让元素调用 flip 方法就可以了。

$('.flipbox').flip({})

不过,仅仅只是单纯的调用 flip 方法的话,很多属性是默认的,也许不一定符合你的要求,你可以根据自己的要求、喜好添加相应的属性,Flip 提供的全部属性有:

content

定义翻转后元素的新内容,可以是:文本 、 HTML 或 jQuery 对象

direction

定义元素翻转的方向,可选:tb/bt/lr/rl ,默认为 tb

color

定义元素翻转后的背景颜色,默认是 #999999 (从 Firebug 查看得知)

speed

定义翻转的速度,默认为 500 毫秒

onBefore

定义元素翻转之前的回调函数

onAnimation

定义元素翻转到一半时的回调函数

onEnd

定义元素翻转之后的回调函数

更多相关:

一个简单的类似幻灯片的翻页效果
jquery.flip官网
jquery.flip下载

jquery.slicebox介绍:

与此插件,有异曲同工之妙的,还有个:jquery.slicebox 。SLICEBOX插件是一个全新的3D效果滑块并且具有良好的兼容性。 但是,请注意,你只能在支持CSS3的浏览器中看到Slicebox的酷毙的3D效果。(也就是说,老的浏览器,也可以正常的切换功能,只是没了3D效果而已)

jquery.slicebox

使用方法:

$('#sb-slider').slicebox();

更多相关:

查看jquery.slicebox例子
jquery.slicebox下载

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/javascript/jquery-flip-360-degree-flip-jquery-slicebox-3d-effect.html