jQuery仿Google样式的提示卡片3d翻转特效-爱编程

jQuery仿Google样式的提示卡片3d翻转特效

来源：htmleaf 阅读：10 时间：2018-02-04 01:25

这是一款jQuery仿Google样式的提示卡片3d翻转特效插件。插件中结合jQuery和CSS3 transform制作出类似谷歌提示卡片的3d翻转效果，这种效果在视觉上给用户非常好的体验效果。

要使用这个卡片3D翻转特效插件，你需要在html中引入jQuery和jQuery.tip_cards.js以及tip_cards.css 文件。

HTML结构

你可以选择是否使卡片进行类似谷歌的3d翻转效果，如果你需要翻转效果，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>

上面的代码能够很好的执行卡片3d翻转效果。tc_front中的内容时卡片前部的内容，tc_back是卡片后面的内容。

如果你不需要卡片进行翻转，你可以去除所有的tc_front标签和所有的tc_back标签，例如下面的html代码：

<body>
  ..
  <ul class="tips">
    <li>
      <a href="#tip1">...</a>
      <div id="tip1" class="tip">
        ...
      </div>
    </li>
  ..
</body>

JAVASCRIPT

当你放置好html代码后，你可以调用下面的jQuery代码来初始化插件，插件能自动检测你是否想进行卡片3D翻转：

$(".tips").tip_cards({
    entrance: "bottom",
    column: 4, 
    margin: "1%",
    selector: "> li", 
    hoverTilt: "right",
    triggerSelector: "> li a", 
    cardFlyDirection: "all",
    closeButton: "X", 
    flipButton: "Flip",
    navigation: true,
    beforeOpen: null,
    afterOpen: null
});

下面是一些可用的参数：

entrance：该参数用于确定卡片出现的方向，可用值为："bottom"、"left"、"right"和"top"，默认值为“bottom”。
column：该参数设置屏幕中共有多少列卡片，默认值为4。
margin：该参数设置卡片之间的间距margins。它支持百分比单位，默认值为“1%”。
selector：如果你不想使用ul和li，可以通过这个参数定义自己的选择器来改变html结构，默认值是“ > li”。
hoverTilt：该参数用于定义鼠标hover时卡片的倾斜方向。可用值为："right"、 "left"、 "up"和 "down"。默认值为“right”。
triggerSelector：该参数用于定义触发卡片翻转模态窗口的选择器。默认行为是使用列表的链接来触发卡片的翻转，你可以通过设置触发按钮的选择器来改变默认行为。
cardFlyDirection：该参数用于确定模态窗口出现时，卡片出现的方向。可用的值为："all"、"top"、"bottom"、"left" 和 "right"。默认值为"all"，表示卡片从各个方向进入并在模态窗口下叠加起来。
closeButton：该参数可以设置一个改变按钮。设置为false可以阻止插件自动生成关闭按钮。默认关闭按钮字符串为"X"。
flipButton：该参数可以设置一个翻转按钮。设置为false可以阻止插件自动生成关闭按钮。默认关闭按钮字符串为"Flip"。
navigation：设置为true可以在模态窗口出现的时候使用户从一张卡片导航到另一张卡片。默认值为true。

回调函数

通过以上的参数，你可以定制自己喜欢的卡片翻转效果。插件中还提供了一些有用的回调函数：

beforeOpen()：在模态窗口打开后卡片被点击前的回调函数。

$(".tips").tip_cards({
  beforeOpen: function () {
    ...
  }
});

afterOpen()：在模态窗口打开后卡片被点击后的回调函数。

$(".tips").tip_cards({
  afterOpen: function () {
    ...
  }
});

通过上面的参数会回调函数，现在你拥有了一个功能强大的仿Google谷歌卡片3d翻转特效插件。

在线预览源码下载