jQuery Plugins:Flux Slider 2D/3D 图片切换效果展示

[ 作者:笑傲江湖 发布于:2012年-5月-14日 16:03 星期一  分类:百 宝 箱 ]

  Flux Slider 是一个基于CSS3动画的图片切换效果插件,使用了很多CSS3的新属性,其切换效果很流畅,2D切换效果基本和其他的类似插件差不多,但是它的3D切换效果非常炫目,至少我个人比较喜欢那个Explode爆炸效果,图片被分成很多小块,然后分崩离析的朝你扑面而来,我在想如果是3D显示器,这效果也是3D的,那再带上3D眼镜或者直接裸眼能看,估计相当惊人,希望有看到的那一天^_^ 【点击图片查看演示页面】
Flux Slider 2D/3D 图片切换效果展示
HTML 代码:
<!-- 放到body里 -->
<div id="slider">
    <img src="img/avatar.jpg" alt="" />
    <img src="img/ironman.jpg" alt="" title="Ironman Screenshot" />
    <a href=""><img src="img/imagewithlink.jpg" alt="" /></a>
    <img src="img/tron.jpg" alt="" />
</div>
<!-- 放到body里 -->

<!-- 放到head里 -->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/flux.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
		$(function(){
			if(!flux.browser.supportsTransitions)
				alert("Flux Slider 需要您的浏览器支持 CSS3 transitions ,否则效果无法显示。");
				//上面这句是个弹出框,提醒用户浏览器版本过旧。	
				window.f = new flux.slider('#slider', {
					//下面是可以设置的参数选项。
					controls: true,
					autoplay: false,
					transitions: ['zip','bars3d','cube','tiles3d','blinds3d','turn','explode','concentric','warp','blocks2'],
					//可以是一个或者多个,多个时,则图片在切换时随机使用。
			});
		});
</script>
<!-- 放到head里 -->
Options 参数选项:
autoplay:Boolean (default: true)
图片切换是否自动开始,默认值为true,不自动开始请设置为false。
pagination:Boolean (default: false)
是否显示图片页码导航,可以手动点击页码切换图片。默认值为false。
controls:Boolean (default: false)
是否显示上一张、下一张控制按钮,默认值为false。
captions:Boolean (default: false)
图片说明文字条是否显示,说明文字取自于img标签中的title值。
delay:Integer (default: 4000)
自动切换时,两张图片切换之间的时间,默认值为4000毫秒,也就是图片显示4秒钟后切换到下一张。
width:Interger (default: null)
图片容器宽度,默认值为null,插件会自动获取图片宽度。
height:Interger (default: null)
图片容器高度,默认值为null,插件会自动获取图片高度。
transitions:Array (default: all available transitions)
切换效果,如未添加此选项,默认加载所有可用效果。也可以只用自己喜欢的效果,一个或者多个。
2D切换效果:
bars
blinds
blocks
blocks2
concentric
dissolve (requires mask support)
slide
warp
swipe
zip
3D切换效果:
bars3d
blinds3d
cube
tiles3d
turn
explode
浏览器兼容:
Safari
Chrome
iOS
Blackberry Playbook
Firefox 4
Opera 11
  俺用IE8看了一下,切换效果直接就嗝屁了,但是更直观了,直接就是从一张调到另一张图片,也算能用,IE9俺回家试试看,应该是可以。
作者演示页:http://www.joelambert.co.uk/flux/
下载及说明:https://github.com/joelambert/Flux-Slider

标签: CSS3 jQuery 插件 3D Flux Slider 2D 图片切换

评论0 引用0 浏览6752

说点什么:

正文内容:

 




图片博文
不知名的黄花