欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)超酷的照片墻展示效果圖附源碼下載

 更新時(shí)間:2015年10月08日 10:26:13   投稿:mrr  
這篇文章主要介紹了超酷的照片墻展示效果圖附源碼下載的相關(guān)資料,需要的朋友可以參考下

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

查看演示 下載源碼

HTML

本文結(jié)合實(shí)例給大家分享超酷的照片墻效果,該效果依賴jQuery和easing插件,因此首先載入這兩個(gè)文件。

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

接著,我們在需要展示照片墻的位置放置如下代碼:

<div class="grid"></div> 
<div class="animate">點(diǎn)擊看效果</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

首先我們在頁面上動態(tài)載入50張照片,照片源來自網(wǎng)絡(luò)。

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

當(dāng)點(diǎn)擊按鈕時(shí),50張圖片做不同程度的變形縮放轉(zhuǎn)換淡出效果,因?yàn)橐腥胂乱粋€(gè)照片墻了,當(dāng)這些動作全部完成時(shí),開始切入照片墻動畫效果,調(diào)用了storm()函數(shù)。

var d = 0; //延時(shí) 
var ry, tz, s; //定義轉(zhuǎn)換參數(shù) 
$(".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(); //淡出效果全部完成時(shí)調(diào)用 
  }) 
}) 

自定義函數(shù)storm()完成了將每張照片進(jìn)行角度旋轉(zhuǎn)和Z軸位移動作,結(jié)合CSS3使得產(chǎn)生3D效果,然后調(diào)用easing實(shí)現(xiàn)緩沖效果,讓整個(gè)照片墻切入十分流暢,請看代碼:

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

相關(guān)文章

最新評論