一、功能描述
详情请学习《第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; /*可有可无,这里是为了居中而设定*/ }