这是一款效果很酷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