一、插件介绍

 

Jquery.quickflip.js是一款非常经典的翻转翻牌的特效插件，它可以在有效的DIV上展示更多的内容。当我们用鼠标单击，或者用鼠标滑过时，也可以水平翻转、垂直翻转，还可以像翻牌一样来切换内容。当然，如果你水平足够高的话，可以用它来制作一款卡牌游戏。或者其他有意思的游戏。

还必须要说的是，它支持多级翻牌郊果，假如有三张牌，它可以按顺序翻第一张，第二张，第三张，再回到第一张。因为我们平时翻牌，就是正反面，所以大家要对此插件有一个新的认识。

html5数字翻牌效果 js翻牌效果_css

二、插件作者及下载

作者： Jon Raasch
作者介绍：乔恩拉希，是美国俄勒冈波特兰的一个前端Web开发工程师。专注网站开发、用户体验，擅长前端Web开发先进的CSS3和HTML5技术、关注UI设计网页、jQuery / JavaScript/Ajax动画、移动开发，包括HTML5网页应用程序，用于手机和AMP反应布局、本地设备的应用程序。

官方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; /*可有可无，这里是为了居中而设定*/
}