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 相关文章推荐
20个最新的jQuery插件
Jan 13 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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 google或baidu分页代码
2009/11/26 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Python中的类学习笔记
2014/09/23 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
开办大学饮食联盟创业计划书
2014/01/29 职场文书
幼儿教师培训感言
2014/03/08 职场文书
物业管理工作方案
2014/05/10 职场文书