cubeSlider是一款非常简单的jQuery和CSS3 3D旋转木马特效插件。该插件会根据HTML结构中li元素的数量来创建相应面数的旋转木马。使用上非常简单,效果也十分不错。
使用方法
使用该旋转木马插件需要引入jQuery和jquery.cubeSlider.js文件。
<script src="js/jquery-2.1.4.min.js"></script> <script src="js/jquery.cubeSlider.js"></script>
HTML结构
该旋转木马使用无序列表来制作,在每一个<li>
元素中放置一个<div>
作为显示的面。
<ul class="demo"> <li><div>1</div></li> <li><div>2</div></li> <li><div>3</div></li> <li><div>4</div></li> </ul>
CSS样式
需要为该旋转木马特效添加下面的样式:
* { margin: 0; padding: 0; } .demo > li { float: left; list-style-type: none; position: absolute; opacity: 0.6; transition-property: all; transition-duration: 1s; transition-timing-function: ease-in-out; text-align: center; color: #fff; font-size: 70px; cursor: pointer; } .demo { width: 100px; height: 100px; margin: 100px auto; -webkit-transform: rotateY(-10deg) rotateX(-20deg); -webkit-transform-style: preserve-3d; -webkit-perspective: 400px; position: relative; } .demo > li > div { background: #F44336; position: absolute; top: 10px; right: 10px; left: 10px; bottom: 10px; }
初始化插件
在页面加载完毕之后,可以通过下面的方法来初始化该旋转木马插件。
$('.demo').polygon(OPTIONS);
配置参数
该旋转木马插件有三个配置参数。
width
:旋转木马的宽度。height
:旋转木马的高度。timer
:自动播放的时间,设置为false
表示不自动播放。