幻灯片/轮播

jQuery+CSS3简单3D旋转木马插件

创客主机


cubeSlider是一款非常简单的jQuery和CSS3 3D旋转木马特效插件。该插件会根据HTML结构中li元素的数量来创建相应面数的旋转木马。使用上非常简单,效果也十分不错。

使用方法:

使用该旋转木马插件需要引入jQuery和jquery.cubeSlider.js文件。

  1. <script src="js/jquery-2.1.4.min.js"></script>
  2. <script src="js/jquery.cubeSlider.js"></script>

HTML结构:

该旋转木马使用无序列表来制作,在每一个<li>元素中放置一个<div>作为显示的面。

  1. <ul class="demo">
  2.   <li><div>1</div></li>
  3.   <li><div>2</div></li>
  4.   <li><div>3</div></li>
  5.   <li><div>4</div></li>
  6. </ul>

CSS样式:

需要为该旋转木马特效添加下面的样式:

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5.  
  6. .demo > li {
  7.   float: left;
  8.   list-style-type: none;
  9.   position: absolute;
  10.   opacity: 0.6;
  11.   transition-property: all;
  12.   transition-duration: 1s;
  13.   transition-timing-function: ease-in-out;
  14.   text-align: center;
  15.   color: #fff;
  16.   font-size: 70px;
  17.   cursor: pointer;
  18. }
  19.  
  20. .demo {
  21.   width: 100px;
  22.   height: 100px;
  23.   margin: 100px auto;
  24.   -webkit-transform: rotateY(-10deg) rotateX(-20deg);
  25.   -webkit-transform-style: preserve-3d;
  26.   -webkit-perspective: 400px;
  27.   position: relative;
  28. }
  29.  
  30. .demo > li > div {
  31.   background: #F44336;
  32.   position: absolute;
  33.   top: 10px;
  34.   right: 10px;
  35.   left: 10px;
  36.   bottom: 10px;
  37. }

初始化插件:

在页面加载完毕之后,可以通过下面的方法来初始化该旋转木马插件。

  1. $('.demo').polygon(OPTIONS);

配置参数:

该旋转木马插件有三个配置参数。

width:旋转木马的宽度

height:旋转木马的高度

timer:自动播放的时间,设置为false表示不自动播放

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!