当前位置：首页 > 网页特效 > 动画效果

jQuery 3D立方体翻转插件

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

jQuery 3D立方体翻转插件

简介

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

```html
<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翻转元素。

```html
<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立方体翻转插件。

```html
$(function(){
  $('#example').flipbox();
});
```
##### 配置参数
该jquery 3D立方体翻转插件的可用配置参数有：

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

web299.com

jQuery 3D立方体翻转插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果