jQuery翻转卡插件Flip Out Cards

查看演示立即下载

插件描述：Flip Out Cards是一个jQuery插件，创建一个动态多层次翻转卡。

基本用法

创建一个翻转卡片悬停显示更多的信息，需要最新的jQuery库，jquery.flipout_cards.js和flipout_cards.css插入您的文档的<head>，并调用该函数如下：

 $(".flipout").flipout_cards({
    animation: "flipOut",           //动画可以是：Flipout，slideOut和foldOut。默认值是Flipout
    beforeOpen: function () {},     //这个选项接受一个回调函数。该函数将被称为flip打开动画开始前。
    afterOpen: function () {},      //这个选项接受一个回调函数。翻转后的函数将调用打开动画完成。
    beforeClose: function () {},    //这个选项接受一个回调函数。该函数将被称为翻转关闭动画开始前。
    afterClose: function () {}      //这个选项接受一个回调函数。翻转后的函数将调用关闭动画完成。
  });

现在你要做的就是跟随这个HTML标记如下所示:

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

容器的类名foc-main主要内容区域，你可以添加尽可能多的卡片。简单重复的容器类名foc-left和插件会自动叠加。

您还可以定义哪个方向可能会通过简单地改变类名卡的容器。可用的类名foc-left、foc-right foc-top,foc-bottom。

回调

您可以使用回调执行操作之前或之后卡显示:

beforeOpen

这个选项接受一个回调函数。该函数将被称为flip打开动画开始前。

$(".flipout").flipout_cards({
  beforeOpen: function () {
    ...
  }
});

afterOpen

这个选项接受一个回调函数。该函数将被称为翻转打开动画之前完成。

$(".flipout").flipout_cards({
  afterOpen: function () {
    ...
  }
});

beforeClose

这个选项接受一个回调函数。该函数将被称为翻转关闭动画开始前。

$(".flipout").flipout_cards({
  beforeClose: function () {
    ...
  }
});

afterClose

这个选项接受一个回调函数。翻转前的函数将调用关闭动画完成。

$(".flipout").flipout_cards({
  afterClose: function () {
    ...
  }
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery滚动隐藏或显示顶部插件ScrollUpBar Plugin
下一个特效： jquery通知插件toastr