快速制作卡片翻转效果的jquery插件

当前位置:主页 > jQuery库 > 工具类 > 快速制作卡片翻转效果的jquery插件
快速制作卡片翻转效果的jquery插件
分享:

    插件介绍

    这是一款可以快速制作卡片翻转效果的jquery插件。用户可以不了解CSS3语法,就可以通过该插件制作出炫酷的卡片翻转效果。

    浏览器兼容性

    浏览器兼容性
    时间:2017-09-11
    阅读:
简要教程

这是一款可以快速制作卡片翻转效果的jquery插件。用户可以不了解CSS3语法,就可以通过该插件制作出炫酷的卡片翻转效果。

安装

可以通过npm或bower来安装jquery.flip.js卡片翻转插件。

npm install nnattawat/flip
bower install flip                  
                

使用方法

在页面中引入jquery和jquery.flip.js文件。

<script src="path/to/jquery.js"></script>
<script src="path/tojquery.flip.js"></script>
                
HTML结构

一张要进行3D翻转的卡片的基本HTML结构如下:

<div id="card"> 
  <div class="front"> 
    卡片正面内容
  </div> 
  <div class="back">
    卡片反面内容
  </div> 
</div>
                
初始化插件

在页面DOM元素加载完毕之后,可以通过flip()方法来对插件进行初始化。

$(function($) {
  $("#card").flip(); 
});                 
                

配置参数

jquery.flip.js卡片翻转插件的可用配置参数如下:

参数 可选值 默认值 描述
axis 'y', 'x' 'y' 卡片翻转的中心轴。
trigger 'click', 'hover', 'manual' 'click' 触发卡片翻转的事件。
reverse true, false false 是否反向翻转卡片。
speed 任意整数 500 卡片翻转的持续时间,数值越大翻转得越慢。
front jquery选择器或jquery对象 '.front' 卡片的正面。
back jquery选择器或jquery对象 '.back' 卡片的反面。
autoSize true, false true 卡片是否自动适应它的容器的尺寸。
forceWidth true, false false 是否强制卡片的宽度适应它的父容器的宽度。
forceHeight true, false false 是否强制卡片的高度适应它的父容器的高度。

关于jquery.flip.js卡片翻转插件的更多信息可以参考:https://github.com/nnattawat/flip

网友评论