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 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
angularjs性能优化的方法
Sep 05 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 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
php 将excel导入mysql
2009/11/09 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
javascript动态加载二
2012/08/22 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
python 读取、写入txt文件的示例
2020/09/27 Python
Numpy数组的广播机制的实现
2020/11/03 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
有机童装:Toby Tiger
2018/05/23 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
暑期培训随笔感言
2014/03/10 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
医院见习总结
2015/06/24 职场文书
养成教育工作总结
2015/08/13 职场文书