专注于WEB前端开发,HTML基础知识,CSS基础知识,HTML5和CSS3,Javascript,Jquery,Jquery插件,移动开发,微信开发等技术话题

当前位置:CSSTOP主页 > CSS3动画 > 正文

css3和js实现移动端的弹性堆叠图片切换特效

这是一款效果非常酷的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 ;
  }               
              
JAVASCRIPT

该弹性堆叠图片切换特效使用js来完成图片弹性拖拽效果。分为两种拖拽事件:鼠标拖拽的mousemove系列事件和移动触摸设备的touchmove系列事件。具体实现方式请查看文件的源代码。