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

所属分类:其他,媒体-动画效果,图片展示

 9912  59  查看评论 (0)
jquery堆叠图片展开和折叠动画特效 ie兼容10

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;}


相关插件-动画效果,图片展示

CSS3圆形图片遮罩特效-CIRCLE HOVER EFFECTS

今天我要给大家介绍一款圆形覆盖的多种好看的效果 Circle Hover Effects。圆形在当前的设计领域还是用得比较多的,我们只需要准备正常的矩形图片,然后就可以在这款特效的样式下变成圆形图片。接着当我们鼠标移动到图片上时,就会呈现多种不同的效果了。注意,该特效是基于css3打造的,所以我们的浏览器必须支持css3才能看到效果。
  动画效果
 21700  125

html5浪漫粒子表白

html5粒子效果浪漫表白特效
  动画效果
 9768  44

ripplebuttons.js水波效应的独立库

ripplebuttons.js是用于网站添加水波动画的一个轻量级独立库。
  动画效果
 16214  35

jquery文字动画插件LetterFX

一个jQuery应用动画插件,视觉效果以字母、单词或其他文本模式。
  动画效果
 15349  125

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复