这是一款效果很酷jQuery超酷卡片动态3d翻转特效插件。这个卡片3d翻转插件通过卡片3d翻转来显示更多的信息。这个插件已经在Chrome, Firefox, Safari的桌面和移动浏览器上测试通过，但还没有在IE上做过测试。

这个插件所有的翻转效果都是通过css3来完成，我们使用jQuery来切换class，以使翻转动画能够顺利完成。

为了使卡片序列按预定顺序先后出现，我们使用了时间戳和在每个方向上构建一个组序列。例如：某个方向上有5个“foc-left”卡片，插件将一一循环它们来执行动画。因为基于卡片检测数量的乘法计算，你可以任意添加多张卡片，插件可以自动将它们以特定的序列一一执行动画。

要使用这个插件，需要在html中引入jQuery和jQuery.flipout_cards.js 以及 flipout_cards.css文件。

HTML结构

包装容器的class为foc-main的div是放置翻转卡的地方，所有放置在里面的卡片将被隐藏和用于向外翻转。

<body>
  ..
  <div class="flipout">
    <div class="foc-main">
      ...
    </div>
    <div class="foc-left">
     ...
    </div>
    ...
  </div>
  ..
</body>

要定义卡片翻转的方向，可以简单的改变class foc-left，可以改为：“foc-right”, “foc-top” 或 “foc-bottom”。

JAVASCRIPT

jQuery插件将检测所有的卡片，将他们分组压栈。

$(".flipout").flipout_cards({
    animation: "flipOut",          
    beforeOpen: function () {},    
    afterOpen: function () {},     
    beforeClose: function () {},   
    afterClose: function () {}     
});

下面是一些可用的参数：

  • animation：该参数可以设置动画的类型：“flipOut”, “slideOut” 和 “foldOut”。默认为“flipOut”。
  • beforeOpen：该参数是打开卡片动画前的回调函数。默认值为“null”。
  • afterOpen：该参数是卡片动画结束后的回调函数。默认值为“null”。
  • beforeClose：该参数是卡片动画结束后的回调函数。默认值为“null”。
  • afterClose：该参数是卡片动画关闭后的回调函数。默认值为“null”。

几个回调函数的用法如下：

beforeOpen()
$(".flipout").flipout_cards({
  beforeOpen: function () {
    alert(“About to be opened”)
  }
});
afterOpen()
$(".flipout").flipout_cards({
  afterOpen: function () {
    alert(“Opened Successfully”)
  }
});
beforeClose()
$(".flipout").flipout_cards({
  beforeClose: function () {
    alert(“About to be closed”)
  }
});
beforeClose()
$(".flipout").flipout_cards({
  afterClose: function () {
    alert(“Closed successfully”)
  }
});
更多信息可以参考：https://github.com/peachananr/flipout_cards