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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
Vue组件实现触底判断
Jun 26 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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有效防止同一用户多次登录
2015/11/19 PHP
php提交post数组参数实例分析
2015/12/17 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
vue中appear的用法
2017/08/17 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
三步实现Django Paginator分页的方法
2019/06/11 Python
如何使用python进行pdf文件分割
2019/11/11 Python
pytorch 常用线性函数详解
2020/01/15 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
优秀实习生感言
2014/03/01 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
小学毕业教师寄语
2019/06/21 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
python中Matplotlib绘制直线的实例代码
2021/07/04 Python