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

 更新时间:2015年10月08日 10:26:13   投稿:mrr  
这篇文章主要介绍了超酷的照片墙展示效果图附源码下载的相关资料,需要的朋友可以参考下

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

查看演示 下载源码

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' 
    }) 
  }) 
} 

相关文章

  • 谈谈PHP中相对路径的问题与绝对路径的使用

    谈谈PHP中相对路径的问题与绝对路径的使用

    经常看到有人踩在了PHP路径的坑上面了,感觉有必要来说说PHP中相对路径的一些坑,以及PHP中绝对路径的使用,下面一起来看看。
    2016-08-08
  • 慎用 somefunction.prototype 分析

    慎用 somefunction.prototype 分析

    在写 JavaScript 脚本的时候,为了创建一个类,如果不使用框架,一般情况我们都会使用 prototype 来给要创建的类增加公有方法
    2009-06-06
  • JavaScript关联数组用法分析【概念、定义、遍历】

    JavaScript关联数组用法分析【概念、定义、遍历】

    这篇文章主要介绍了JavaScript关联数组用法,结合实例形式分析了关联数组的概念、定义与遍历操作相关实现技巧,需要的朋友可以参考下
    2017-03-03
  • 小程序组件之仿微信通讯录的实现代码

    小程序组件之仿微信通讯录的实现代码

    这篇文章主要介绍了小程序组件之仿微信通讯录的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Javascrip实现文字跳动特效

    Javascrip实现文字跳动特效

    这篇文章主要介绍了Javascrip实现文字跳动特效的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • JavaScript文档加载模式以及元素获取

    JavaScript文档加载模式以及元素获取

    这篇文章主要介绍了JavaScript文档加载模式以及元素获取,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • ie中js创建checkbox默认选中问题探讨

    ie中js创建checkbox默认选中问题探讨

    js创建checkbox默认选中在某些特殊情况下还是比较实用的,下面有个不错的示例,大家可以参考下
    2013-10-10
  • 基于Bootstrap实现城市三级联动

    基于Bootstrap实现城市三级联动

    这篇文章主要为大家详细介绍了基于BootStrap实现城市三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • javascript初学者常用技巧

    javascript初学者常用技巧

    这篇文章主要介绍了javascript初学者常用技巧,包括javascript的存放位置、格式及焦点事件等,需要的朋友可以参考下
    2014-09-09
  • 微信小程序数据统计和错误统计的实现方法

    微信小程序数据统计和错误统计的实现方法

    这篇文章主要介绍了微信小程序数据统计和错误统计的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06

最新评论