欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 图片效果 > jQuery 3D立方体翻转插件

jQuery 3D立方体翻转插件

jQuery 3D立方体翻转插件

关键词:3d翻转,3d,立方体,jquery3d翻转,jquery3d翻转插件,jquery3d翻转特效,3d立方体,jquery库,tupian

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

简要教程

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

使用方法

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

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

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

$(function(){
  $("#example").flipbox();
});
                

配置参数

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

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

该jquery 3D立方体翻转插件的github地址为:https://github.com/krebszattila/jquery-flipbox

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_tupian/9344.html

 在线演示  免费下载
编号:201809250000009344
大小:0.04MB
上传时间:2018-11-08 08:01
素材由用户"song2012008"上传分享。

标签

最新推荐素材

与jQuery 3D立方体翻转插件相关的素材

.