这是一款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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!