jQuery翻转卡片式插件

所属分类： JQ特效媒体图片展示

查看演示立即下载

插件描述：提示卡插件让你创建卡布局,与你看到一个卡片状的交互谷歌提示页面。我还添加了一些新的动画选项，以便您可以在个性化你自己的喜好。

创建一个让用户通过它翻转卡片布局的插件,就像谷歌的提示页面效果

基本用法

提示卡插件让你创建卡布局,与你看到一个卡片状的交互谷歌提示页面。我还添加了一些新的动画选项，以便您可以在个性化你自己的喜好。

要添加到您的网站，你所要做的就是包括最新的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 () {
        ...
    }
});

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

上一个特效： jQuery描述插件
下一个特效： jQuery轮播图插件movingboxes.js