js实现酷照片墙显示渲染与源代码下载

这是一个很酷的照片墙显示效果。许多照片结合了淡入、旋转、缩放、倾斜和3D效果。照片从左侧快速切入，3D效果旋转。最后，它们整齐地排列在照片墙上，为用户展示了酷炫的照片墙展示效果。

查看演示下载源代码。

超文本标记语言

在本文中，我们用例子分享了酷炫的照片墙效果，它依赖于jQuery和easy插件，所以首先加载这两个文件。

script src=' http : jquery . min . js '/script script src=' http : jquery . easy . 1 . 3 . js '/script接下来，我们将以下代码放在需要显示照片墙的位置：

div class=' grid '/div class=' animate '点击查看效果/div CSS。

CSS定义了照片墙、照片排列、按钮样式的基本样式。网格{ width: 600pxheight: 300pxmargin: 100px汽车50px汽车；透视500px/*对于3d*/}。网格img { width: 60px高度： 60px；display:块；向左浮动：} .动画{ text-transform:大写；背景： rgb(0，100，0)；color:白色；padding: 10px 20pxborder-radius : 5px；cursor:指针；margin:10px汽车；宽度width:100px文本对齐：居中；} . animate : hover { background : RGB(0，75，0)；} JS

首先，我们在页面上动态加载50张照片，照片来源来自网络。

var images=' '，count=50for(var I=1；i=计数；I)images=' img src=' http :http://thecodeplayer.com/u/ui faces/' I '。jpg '/'；$('.网格')。追加(图像)；当点击按钮时，50张图片会发生不同程度的变形、缩放、转换和淡出，因为它们即将切入下一面照片墙。当所有这些动作完成后，它们开始切入照片墙的动画效果，并调用storm()函数。

var d=0；//Delay var ry，tz，s；//定义转换参数$('。动画’)。on ('click '，function () {$ ('img ')。每个(函数(){ d=math . random()* 1000；//1毫秒到1000毫秒延迟$(这个)。延迟(d)。animate({ opa city 3360 0 }，{ step : function(n){ s=1-n；//scale -将动画从0到1 $(这个)。css('transform '，' scale(' s ')))；}，duration: 1000 }) })。承诺()。done(function(){ storm()；//淡出效果完成时调用})})自定义功能storm()完成每张照片的角度旋转和Z轴位移，结合CSS3产生3D效果，再调用each实现缓冲效果，使得整个照片墙切入流畅。请查看代码：

函数storm(){ $('img ')。每个(函数(){ d=Math . random()* 1000；$(这个)。延迟(d)。动画化({ opacity: 1 }，{ step:函数(n){//将Y轴上的图像从360度旋转到0度ry=(1-n)* 360；//将图像从1000px转换为0px tz=(1-n)* 1000；//应用转换$(this)。css('transform '，' rotateY(' ry ' deg)translateZ(' tz ' px)')；}，duration: 3000，eas : ' easeOutQuint ' })})