插件描述：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 () {
...
}
});
PREVIOUS:
NEXT:
相关插件-杂项
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
