這篇文章主要介紹了超酷的照片墻展示效果圖附源碼下載的相關資料,需要的朋友可以參考下

這是一個超酷的照片墻展示效果，很多照片結合淡入淡出、旋轉、縮放、傾斜及3D效果，照片快速從左側切入，做旋轉3D效果，最后在照片墻上整齊排列，為用戶展示了超酷的照片墻展示效果。

HTML

本文結合實例給大家分享超酷的照片墻效果，該效果依賴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. $(".grid").append(images); 

當點擊按鈕時，50張圖片做不同程度的變形縮放轉換淡出效果，因為要切入下一個照片墻了，當這些動作全部完成時，開始切入照片墻動畫效果，調用了storm()函數。

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

自定義函數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. }