css3和js适合移动mobile的弹性堆叠图片切换特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款效果非常酷的js和CSS3适合移动mobile的弹性堆叠图片切换特效。该弹性堆叠图片切换特效的特点是支持移动触摸屏设备，可以通过手指滑动来切换图片。所有图片开始时堆叠在一起，当你用手指滑动图片的时候，堆叠图片就像弹簧被扯动一样，最上面的一张图片被拉到最下面，效果非常炫酷。

该效果类似于html5和js拖拽式超弹性效果堆叠图片切换展示特效，但是可以在移动触摸屏上使用。

使用方法

HTML结构

该弹性堆叠图片切换特效的HTML结构使用<div>的嵌套结构。

<div class="slider">
    <div class="slide" ><img src="img/1.jpg" /><p>rutrum tellus a tempus :)</p></div>
    <div class="slide"><img src="img/3.jpg" /><p>litora torquent per conubia</p></div>
    <div class="slide"><img src="img/2.jpg" /><p>sed consectetur faucibus</p></div>
    <div class="slide" ><img src="img/4.jpg" /><p>eleifend tempus justo</p></div>
</div>

每一个.slide是一张图片，<p>中的文本是图片的标题。

CSS样式

在包裹容器<div.slider>上使用了perspective用于制作3D透视效果，并指定它的宽度和高度，以及动画过渡效果。

.slider{
      -webkit-animation:animation ease 1s;animation-delay:.8s;animation-fill-mode:backwards;
      margin: 0 auto;
      height:360px;
      width:240px;
      padding:40px;
      top:100px;
      perspective:1000px;
      transition:ease-in-out .2s;
  }

为了不让用户选择到图片标题文本，在.slide和它里面的图片上都使用了user-drag:none;属性。.slide指定transform-style是为了使图片具有空间层次感。想了解更多可以看看这篇文章：CSS3 3D transforms系列教程-卡片翻转。

.slide img { 
  text-align:center;
  width:100%; 
  height:100%; 
  -webkit-user-drag:none;
  user-drag:none;
  -moz-user-drag:none; 
  border-radius:2px; 
}
.slide{
      -webkit-user-select:none;
      user-select:none;
      -moz-user-select:none;
      position:absolute;
      height:280px;
      width:240px;
      box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
      background:#fcfcfc;
      -webkit-transform-style:preserve-3d;
      transform-style:preserve-3d;
      -moz-transform-style:preserve-3d;
      text-align:center;
      /*overflow:hidden;*/
      border:12px white solid;
      box-sizing:border-box;
      border-bottom:55px white solid;
      border-radius:5px; 
  }
  .transition {
      -webkit-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
      -moz-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
      transition: cubic-bezier(0,1.95,.49,.73) .4s ;
  }