js实现超酷的照片墙展示效果图附源码下载


Posted in Javascript onOctober 08, 2015

这是一个超酷的照片墙展示效果,很多照片结合淡入淡出、旋转、缩放、倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果。

js实现超酷的照片墙展示效果图附源码下载

查看演示 下载源码

HTML

本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件。

<script src="jquery.min.js"></script> 
<script src="jquery.easing.1.3.js"></script>

接着,我们在需要展示照片墙的位置放置如下代码:

<div class="grid"></div> 
<div class="animate">点击看效果</div>

CSS

CSS定义了照片墙基本样式,照片排列以及按钮样式。

.grid { 
  width: 600px; height: 300px; margin: 100px auto 50px auto; 
  perspective: 500px; /*For 3d*/ 
} 
.grid img {width: 60px; height: 60px; display: block; float: left;} 
 
.animate { 
  text-transform: uppercase; 
  background: rgb(0, 100, 0); color: white; 
  padding: 10px 20px; border-radius: 5px; 
  cursor: pointer;margin:10px auto;width:100px;text-align:center; 
} 
.animate:hover {background: rgb(0, 75, 0);}

JS

首先我们在页面上动态载入50张照片,照片源来自网络。

var images = "", count = 50; 
for(var i = 1; i <= count; i++) 
  images += '<img src="http://thecodeplayer.com/u/uifaces/'+i+'.jpg" />'; 
   $(".grid").append(images);

当点击按钮时,50张图片做不同程度的变形缩放转换淡出效果,因为要切入下一个照片墙了,当这些动作全部完成时,开始切入照片墙动画效果,调用了storm()函数。

var d = 0; //延时 
var ry, tz, s; //定义转换参数 
$(".animate").on("click", function(){ 
  $("img").each(function(){ 
    d = Math.random()*1000; //1ms to 1000ms delay 
    $(this).delay(d).animate({opacity: 0}, { 
      step: function(n){ 
        s = 1-n; //scale - will animate from 0 to 1 
        $(this).css("transform", "scale("+s+")"); 
      }, 
      duration: 1000 
    }) 
  }).promise().done(function(){ 
    storm(); //淡出效果全部完成时调用 
  }) 
})

自定义函数storm()完成了将每张照片进行角度旋转和Z轴位移动作,结合CSS3使得产生3D效果,然后调用easing实现缓冲效果,让整个照片墙切入十分流畅,请看代码:

function storm(){ 
  $("img").each(function(){ 
    d = Math.random()*1000; 
    $(this).delay(d).animate({opacity: 1}, { 
      step: function(n){ 
        //rotating the images on the Y axis from 360deg to 0deg 
        ry = (1-n)*360; 
        //translating the images from 1000px to 0px 
        tz = (1-n)*1000; 
        //applying the transformation 
        $(this).css("transform", "rotateY("+ry+"deg) translateZ("+tz+"px)"); 
      }, 
      duration: 3000, 
      easing: 'easeOutQuint' 
    }) 
  }) 
}
Javascript 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
深入理解Promise.all
Aug 08 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
详解node.js 事件循环
Jul 22 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 #Javascript
Javascript控制div属性动态变化实例分析
Oct 08 #Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 #Javascript
分享五个有用的jquery小技巧
Oct 08 #Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 #Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 #Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 #Javascript
You might like
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
分享常见的几种页面静态化的方法
2015/01/08 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
理解Python中的With语句
2015/02/02 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
学校岗位设置方案
2014/01/16 职场文书
年终总结会议主持词
2014/03/17 职场文书
安装工程师岗位职责
2015/02/13 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
小学安全教育主题班会
2015/08/12 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书