插件描述：提示卡插件让你创建卡布局,与你看到一个卡片状的交互谷歌提示页面。我还添加了一些新的动画选项，以便您可以在个性化你自己的喜好。
创建一个让用户通过它翻转卡片布局的插件,就像谷歌的提示页面效果
基本用法
提示卡插件让你创建卡布局,与你看到一个卡片状的交互谷歌提示页面。我还添加了一些新的动画选项，以便您可以在个性化你自己的喜好。
要添加到您的网站，你所要做的就是包括最新的jQuery库，连同jquery.tip_cards.js和tip_cards.css到文档中的<HEAD>，并按照HTML标记，如下所示：
双面可翻转的HTML标记
这是默认的标记
<body> .. <ul class="tips"> <li> <div class="tc_front"> <a href="#tip1">...</a> </div> <div class="tc_back">...</div> <div id="tip1" class="tip"> <div class="tc_front">...</div> <div class="tc_back">...</div> </div> </li> .. </body>
注：如果您想在卡上，翻动，HTML标记上面会很好地工作。里面的内容tc_front将是卡的前侧和内侧的内容tc_back将在卡的背面。
普通的HTML标记
如果你不希望它是可翻转然后取出所有tc_front和tc_back如下图所示，您的信用卡将不再翻动。
<body> .. <ul class="tips"> <li> <a href="#tip1">...</a> <div id="tip1" class="tip"> ... </div> </li> .. </body>
一旦做到这一点，只需调用该函数如下面和插件会自动检测是否使该卡可翻转或不是从你提供的标记：
$(".tips").tip_cards({
entrance: "bottom",
//This option let you determine the direction of the fly in entrance animation when all the cards appears. Available options are "bottom", "left", "right", and "top". The default value is "bottom".
column: 4,
//The plugin also let you define how the card will be displayed and aligned. You can set the column of cards here. The default value is 4.
margin: "1%",
//You can define the margins between each cards here. Percentage is currently support at this point. The default is "1%".
selector: "> li",
//You can define a custom selector if you do not want to use ul and li tags. This option accepts the normal CSS selector. The default value is "> li"
hoverTilt: "right",
//Define the tilt direction when cards are hovered here. Available options are "right", "left", "up", and "down". The default value is "right".
triggerSelector: "> li a",
//You can also define a custom selector for the trigger button here. The default value is "> li a" which will use the link inside a list as a trigger to activate the card.
cardFlyDirection: "all",
//You can define the card fly animation when the modal appears here. Available options are "all", "top", "bottom", "left", and "right". The default value is "all" which will have the cards fly in from all direction and stack up under the opened modal
closeButton: "X",
//You can define the content of the close button here. Change this to false to prevent the plugin from automatically generating the close button. The default string is "X".
flipButton: "Flip",
//You can define the content of the flip button here. Change this to false to prevent the plugin from automatically generating the flip button. The default string is "Flip".
navigation: true,
//Set this to true to allow users to navigate from one card to another when modal is opened. Change it to false to disable it. The default value is true.
beforeOpen: null,
//A callback function that will be executed before the modal opens.
afterOpen: null
//A callback function that will be executed after the modal opens.
});回调
您可以使用回调来执行动作状态打开之前或之后。
beforeOpen()
这个回调会被调用状态打开之前，卡被点击之后。
$(".tips").tip_cards({
beforeOpen: function () {
...
}
});afterOpen（）
这个回调会被调用状态打开后。
$(".tips").tip_cards({
afterOpen: function () {
...
}
});
PREVIOUS:
NEXT:
相关插件-图片展示
HTML5/CSS3超酷焦点图特效
焦点图插件切换效果比较简单，但是外观和功能却十分强大。该CSS3焦点图在切换图片时，图片以淡入淡出的方式缩小消失并显示下一张图片。焦点图插件还拥有一套非常大气的前后翻页按钮，是一款非常实用HTML5/CSS3焦点图应用。
图片展示
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
