JQuery制作翻牌翻转特效插件quickflip

简介

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://dev.jonraasch.com/quickflip/examples/