jQuery 3D垂直立方体翻转特效插件

jQuery 3D垂直立方体翻转特效插件

这是一款jQuery 3D立方体翻转插件。该插件可以创建水平或垂直的3d立方体效果,可以控制立方体的翻转速度,定义触发立方体旋转的事件等。

使用方法
在页面中引入jquery和jquery.flipbox.js、jquery.flipbox.css文件。

1
2
3
<link href="css/jquery.flipbox.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>            
<script type="text/javascript" src="js/jquery.flipbox.js"></script>

HTML结构
使用下面的结构创建一个3D翻转元素。

1
2
3
4
5
6
7
8
9
10
11
<div class="box" id="example">
  <div class="side side1">1</div>
  <div class="side side2">2</div>
  <div class="side side3">3</div>
  <div class="side side4">4</div>
  <div class="side side5">5</div>
  <div class="side side6">6</div>
  <div class="side side7">7</div>
  <div class="side side8">8</div>
  ...
</div>

初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery 3D立方体翻转插件。

1
2
3
$(function(){
  $('#example').flipbox();
});

配置参数
该jquery 3D立方体翻转插件的可用配置参数有:

1
2
3
4
5
6
7
8
9
10
vertical:翻转的方向,默认为false,表示水平翻转。
width:翻转元素的宽度,单位像素。
height::翻转元素的高度,单位像素。
index:初始化显示的面,默认为0
animationDuration:翻转动画的持续时间,单位毫秒,默认为400
animationEasing:翻转动画的easing函数,默认为ease。
autoplay:是否自动翻转,默认为false
autoplayReverse:是否能无限循环,默认为false
autoplayWaitDuration:自动翻转的等待时间,单位毫秒,默认为3000
autoplayPauseOnHover:是否在鼠标hover时,暂停自动翻转。

文件信息:

    1

    发表评论