欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 图片效果 > 超酷堆叠图片展开和折叠jquery动画特效

超酷堆叠图片展开和折叠jquery动画特效

超酷堆叠图片展开和折叠jquery动画特效

关键词:动画,图片堆叠,折叠,jquery图片展示,堆叠图片,jquery动画,展开,图片相册

描述:这是一款效果非常炫酷的堆叠图片展开和折叠jquery动画特效。该特效中,所有图片可以像扑克牌一样进行堆叠,在触发相应的事件之后,堆叠的图片会议动画的方式全屏展开,效果非常炫酷。

简要教程

这是一款效果非常炫酷的堆叠图片展开和折叠jquery动画特效。该特效中,所有图片可以像扑克牌一样进行堆叠,在触发相应的事件之后,堆叠的图片会议动画的方式全屏展开,效果非常炫酷。

使用方法

在页面底部,<body>标签结束之前,引入jquery和PerspectiveTransform.js、TweenMax.min.js文件,以及init.js文件。

<script src="path/to/js/jquery.min.js"></script>                
<script src="path/to/js/PerspectiveTransform.js"></script>                
<script src="path/to/js/TweenMax.min.js"></script>                
<script src="path/to/js/init.js"></script>                
                
HTML结构

该堆叠图片的基本HTML结构如下:

<div class="t-container">

    <div class="t-content">
      <img class="t-img" src="img/img0.jpg" alt="" />
      <div class="cover"></div>
    </div>
    
    <div class="t-content">
      <img class="t-img" src="img/img1.jpg" alt="" />
      <div class="cover"></div>
    </div>
    
    <div class="t-content">
      <img class="t-img" src="img/img2.jpg" alt="" />
      <div class="cover"></div>
    </div>
    
    ......

  </div>

  <div class="container">
    <button type="button" class="btn btn-primary" id="toggle">打开/关闭</button>
  </div>
</div>               
                
CSS样式

为该堆叠图片特效添加下面的CSS样式:

body{overflow:hidden;}
.t-container{position:absolute;top:0;left:0;}
.t-container .t-content{position:absolute;top:0;left:0;width:400px;height:225px;}
.t-container .t-content img{position:absolute;width:400px;height:225px;}
.t-container .t-content .cover{position:absolute;top:0;left:0;background-color:rgba(0, 0, 0, 0.75);width:400px;height:225px;}
.container{position:absolute;-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%;bottom:50px;}
.container .btn{z-index:9999;}
                

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_tupian/23.html

 在线演示  免费下载
编号:201611200000000023
大小:0.43MB
上传时间:2016-11-24 16:34
素材由用户"w554968830"上传分享。

标签

最新推荐素材

与超酷堆叠图片展开和折叠jquery动画特效相关的素材

.