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 相关文章推荐
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
Nuxt.js实战详解
Jan 18 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
vue-router为激活的路由设置样式操作
Jul 18 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中MD5函数使用实例代码
2008/06/07 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python的Tqdm模块的使用
2018/01/10 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
使用python3构建文件传输的方法
2019/02/13 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
详解Django CAS 解决方案
2019/10/30 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
python利用opencv实现颜色检测
2021/02/23 Python
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
网上卖盒饭创业计划书范文
2014/02/07 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
商业街策划方案
2014/05/31 职场文书
2015会计试用期工作总结
2014/12/12 职场文书