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

jquery多方位多层次弹出卡片插件Flip Out Cards

动画 fishcity 1445浏览

弹出卡片插件Flip Out Cards

Flip Out Cards是一个基于jQuery的多层次多方向弹出卡片插件,Flip Out Cards插件可以轻松实现当鼠标悬浮于卡片上时,同时从卡片的左、右、下三个方向弹出三张卡片,看起来有点像变形金刚的感觉,用于产品的说明是个不错的选择。本站另外一款html5+css3制作仿Google Tips的jquery翻卡片应用。本实例在Chrome, Firefox, 和 Safari 在PC端与移动测试通过,IE下没有请自行测试。

使用方法

引入核心文件 

<link href='flipout_cards.css' rel='stylesheet' type='text/css'>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flipout_cards.js"></script>

写入html

<div class="flipout">
  <div class="foc-main">
    ...  </div>
  <div class="foc-left">
   ...  
  </div>
  ...
</div>

带有class="focmain"的div窗口为主卡片,其它的卡片以它为中心来弹出,而其它非主卡片的div基于主卡片独立展现,当然这些非主卡片可以任意添加,数量不限,只需带上预设的类名就OK,如foc-left:向左边弹展,多个同类名卡片的情况将依次向左排开,你也可以通过修改预设的类名来实现不同方向的弹开卡片,预设选项有:foc-left, foc-right, foc-top, 和 foc-bottom。

写入JS,初始化插件

  $(".flipout").flipout_cards({
    animation: "flipOut",           // 动画的方式: flipOut, slideOut and foldOut. T默认值:flipOut
    beforeOpen: function () {},     // 卡片动画展开前调用的方法
    afterOpen: function () {},      // 卡片动画展开后调用的方法
    beforeClose: function () {},    // 卡片动画关闭前调用的方法
    afterClose: function () {}      // 卡片动画关闭后调用的方法
  });

转载请注明:jQ酷 » jquery多方位多层次弹出卡片插件Flip Out Cards

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