一、插件介绍
Jquery.quickflip.js是一款非常经典的翻转翻牌的特效插件,它可以在有效的DIV上展示更多的内容。当我们用鼠标单击,或者用鼠标滑过时,也可以水平翻转、垂直翻转,还可以像翻牌一样来切换内容。当然,如果你水平足够高的话,可以用它来制作一款卡牌游戏。或者其他有意思的游戏。
还必须要说的是,它支持多级翻牌郊果,假如有三张牌,它可以按顺序翻第一张,第二张,第三张,再回到第一张。因为我们平时翻牌,就是正反面,所以大家要对此插件有一个新的认识。
二、插件作者及下载
作者: Jon Raasch
作者介绍:乔恩拉希,是美国俄勒冈波特兰的一个前端Web开发工程师。专注网站开发、用户体验,擅长前端Web开发先进的CSS3和HTML5技术、关注UI设计网页、jQuery / JavaScript/Ajax动画、移动开发,包括HTML5网页应用程序,用于手机和AMP反应布局、本地设备的应用程序。
作者官网: http://jonraasch.com/
插件网址: http://jonraasch.com/blog/quickflip-2-jquery-plugin
开发文档: http://dev.jonraasch.com/quickflip/docs
插件下载: http://www.ijquery.cn/js/jquery.quickflip.js
官方DEMO:
官方DEMO下载:
三、使用方法
$('.quickFlip').quickFlip();
四、插件参数
closeSpeed:180, //关闭层的速度,默认关闭速度是180 openSpeed:120, //打开层的速度,默认打开速度是120 ctaSelector:".quickFlipCta", //超链接的样式,记住这里一定加要点,即.cursor refresh:false, //默认为false,官方确实有这个参数,但我没看懂是什么意思。 easing:'swing', //切换的过渡效果(目前只有这一个效果) noResize:true, //默认为false,官方确实有这个参数,但我没看懂是什么意思。 vertical:false, //默认为false,是否垂直翻转。说实话,这里垂直的效果做的不好,可以打开closeSpeed和openSpeed来查看效果
五、使用教程
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 src="jquery-1.7.2.min.js"></script> <script src="jquery.quickflip.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="quickflips.css" /> <script type="text/javascript"> $(function() { $('.quickFlip').quickFlip(); }); </script>
3、CSS代码
/* 一定要指定宽度和高度,这样变换的效果比较好 */ .quickFlip { height: 440px; /*高度*/ width: 600px; /*宽度*/ margin:0 auto; /*可有可无,这里是为了居中而设定*/ }