简介

Jquery.quickflip.js是一款非常经典的翻转翻牌的特效插件，它可以在有效的DIV上展示更多的内容。当我们用鼠标单击，或者用鼠标滑过时，也可以水平翻转、垂直翻转，还可以像翻牌一样来切换内容。 插件参数：

closeSpeed:180, //关闭层的速度，默认关闭速度是180
openSpeed:120, //打开层的速度，默认打开速度是120
ctaSelector:".quickFlipCta", //超链接的样式，记住这里一定加要点，即.cursor
refresh:false, //默认为false,官方确实有这个参数，但我没看懂是什么意思。
easing:'swing', //切换的过渡效果(目前只有这一个效果)
noResize:true, //默认为false,官方确实有这个参数，但我没看懂是什么意思。

vertical:false, //默认为false,是否垂直翻转。说实话，这里垂直的效果做的不好，可以打开closeSpeed和openSpeed来查看效果

使用

1   引入 jquery.js 和 jquery.quickflip.js 文件

2.  HTML

<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>

3.  调用

<script type="text/javascript">
    $(function() {
        $('.quickFlip').quickFlip();
    });
</script>

相关链接

官方地址 ：http://jonraasch.com/blog/quickflip-2-jquery-plugin

开发文档 ：http://dev.jonraasch.com/quickflip/docs

在线演示地址 ：http://www.internetke.com/jsEffects/2016013113/