注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

html5+css3制作仿Google Tips的jquery翻卡片应用

jQuery插件 fishcity 1150浏览

一款非常类似goolgle tips的jquery卡板应用,这个是基于html5+css3制作的,这就是说需要支持html的现代浏览器支持,效果不错,动感,简洁大气,很强的视觉效果,喜欢的朋友不妨研究下。

基本用法

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

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

转载请注明:jQ酷 » html5+css3制作仿Google Tips的jquery翻卡片应用

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。