最新消息:

第83款插件(二):jquery.quickflip.js带参数效果

图片幻灯插件 杨红伟 3545浏览 0评论

一、功能描述

详情请学习《第83款插件(一):jquery.quickflip.js制作翻转翻牌特效插件最简使用》

这里面我们将用到所有的quickflip.js的插件来制作一个DEMO,用于展示各种效果。

二、使用教程

1、HTML代码

注意这里只要放一个根目录层<div class=”quickFlip”>中间可以入无数个<div>层,通过我们只放两个,这个一定要注意的。

<div class="quickFlip">
	<div>
		<a href="#" class="quickFlipCta"><img src="images/1.jpg" width="600" height="440" border="0" /></a>
	</div>
	
	<div>
		<a href="#" class="quickFlipCta"><img src="images/2.jpg" width="600" height="440" border="0" /></a>
	</div>
</div>

2、JS代码

<script type="text/javascript">
	$(function() {
		$('.quickFlip').quickFlip({
			closeSpeed:1800,	//关闭层的速度,默认关闭速度是180
			openSpeed:1200,		//打开层的速度,默认打开速度是120
			ctaSelector:".quickFlipCta",		//超链接的样式,记住这里一定加要点,即.cursor
			refresh:false,		//默认为false,官方确实有这个参数,但我没看懂是什么意思。
			easing:'swing',		//切换的过渡效果(目前只有这一个效果)
			noResize:true,		//默认为false,官方确实有这个参数,但我没看懂是什么意思。
			vertical:false,		//默认为false,是否垂直翻转。说实话,这里垂直的效果做的不好,可以打开closeSpeed和openSpeed来查看效果
		});
	});
</script>

3、CSS代码

/* 一定要指定宽度和高度,这样变换的效果比较好 */
.quickFlip {
    height: 440px; /*高度*/
    width: 600px;	/*宽度*/
    margin:0 auto; /*可有可无,这里是为了居中而设定*/
}

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址