夏日博客

A-A+

基于jquery超酷的照片墙展示效果

2016年01月12日 前端设计 暂无评论 阅读 6 views 次

照片墙效果我们相信各位在一些网站会看到得，像大一点的社交网站就会有照片墙的功能了，下面我们来看一外基于jquery超酷的照片墙展示效果的实现例子，具体如下。

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

本文结合实例给大家分享超酷的照片墙效果，该效果依赖jQuery和easing插件，因此首先载入这两个文件。

  1. <script src="jquery.min.js"></script>   
  2. <script src="jquery.easing.1.3.js"></script>  

接着，我们在需要展示照片墙的位置放置如下代码：

  1. <div class="grid"></div>   
  2. <div class="animate">点击看效果</div>   

CSS

CSS定义了照片墙基本样式，照片排列以及按钮样式。

  1. .grid {   
  2.     width: 600px; height: 300px; margin: 100px auto 50px auto;   
  3.     perspective: 500px; /*For 3d*/   
  4. }   
  5. .grid img {width: 60px; height: 60px; display: block; float: left;}   
  6.    
  7. .animate {   
  8.     text-transform: uppercase;   
  9.     background: rgb(0, 100, 0); color: white;   
  10.     padding: 10px 20px; border-radius: 5px;   
  11.     cursor: pointer;margin:10px auto;width:100px;text-align:center;   
  12. }   
  13. .animate:hover {background: rgb(0, 75, 0);}  

JS

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

  1. var images = "", count = 50;   
  2. for(var i = 1; i <= count; i++)   
  3.     images += '<img src="http://thecodeplayer.com/u/uifaces/'+i+'.jpg" />';   
  4.        
  5. $(".grid").append(images);  

当点击按钮时，50张图片做不同程度的变形缩放转换淡出效果，因为要切入下一个照片墙了，当这些动作全部完成时，开始切入照片墙动画效果，调用了storm()函数。

  1. var d = 0; //延时   
  2. var ry, tz, s; //定义转换参数   
  3.    
  4. $(".animate").on("click", function(){   
  5.     $("img").each(function(){   
  6.         d = Math.random()*1000; //1ms to 1000ms delay   
  7.         $(this).delay(d).animate({opacity: 0}, {   
  8.             step: function(n){   
  9.                 s = 1-n; //scale - will animate from 0 to 1   
  10.                 $(this).css("transform", "scale("+s+")");   
  11.             },    
  12.             duration: 1000   
  13.         })   
  14.     }).promise().done(function(){   
  15.         storm(); //淡出效果全部完成时调用   
  16.     })   
  17. })  

自定义函数storm()完成了将每张照片进行角度旋转和Z轴位移动作，结合CSS3使得产生3D效果，然后调用easing实现缓冲效果，让整个照片墙切入十分流畅，请看代码：

  1. function storm(){   
  2.     $("img").each(function(){   
  3.         d = Math.random()*1000;   
  4.         $(this).delay(d).animate({opacity: 1}, {   
  5.             step: function(n){   
  6.                 //rotating the images on the Y axis from 360deg to 0deg   
  7.                 ry = (1-n)*360;   
  8.                 //translating the images from 1000px to 0px   
  9.                 tz = (1-n)*1000;   
  10.                 //applying the transformation   
  11.                 $(this).css("transform", "rotateY("+ry+"deg) translateZ("+tz+"px)");   
  12.             },    
  13.             duration: 3000,    
  14.             easing: 'easeOutQuint'   
  15.         })   
  16.     })   
  17. }  
标签：

给我留言