图片/图形
堆叠图片展开折叠jquery动画特效
PetitQ
这是一款效果非常炫酷的堆叠图片展开和折叠 jquery 动画特效。该特效中，所有图片可以像扑克牌一样进行堆叠，在触发相应的事件之后，堆叠的图片会议动画的方式全屏展开，效果非常炫酷。
使用方法
在页面底部，
标签结束之前，引入 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;}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
