這篇文章給大家分享的是有關(guān)JavaScript+CSS如何實現(xiàn)相冊特效的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)堅信：善待客戶，將會成為終身客戶。我們能堅持多年，是因為我們一直可值得信賴。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。10多年網(wǎng)站建設(shè)經(jīng)驗創(chuàng)新互聯(lián)是成都老牌網(wǎng)站營銷服務(wù)商,為您提供網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)站設(shè)計、HTML5建站、網(wǎng)站制作、成都品牌網(wǎng)站建設(shè)、重慶小程序開發(fā)服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。

嗯 就是這樣一個例子，視頻學到的一個特效，實際用處并不大，但是可以幫助理解JS語言和熟悉CSS3樣式。

設(shè)計：

觀察一張圖片的變化，發(fā)現(xiàn)：

1、圖片縮放（隨機，并且不是同時運動）

      1、從大到小

       2、從小到大，透明度從1到0（在第一步運動完成后立馬開始）

2、圖片旋轉(zhuǎn)（隨機，并且不是同時運動的。需要在全部運動走完以后開始）

3. 因為每張圖片是隨機開始變換的，所以起始時間是不同的，這里可設(shè)置一個延遲器setTimeout，時間用random隨機生成即可。

4. 中間需要用到自執(zhí)行函數(shù)，因為setTimeout無視for循環(huán)的i，所以每次延時器運行的時候i可能都出錯，用自執(zhí)行函數(shù)保存i的每一次值。

5. 轉(zhuǎn)換期間按鈕的div是不能點擊的，需要標記和判斷。

6.運動共有兩個，縮放和旋轉(zhuǎn)，注意縮放全部結(jié)束才能開始旋轉(zhuǎn)，這里也要處理好。

筆記：

scale是縮放

transition 過渡，延遲

子函數(shù)修改父親的值，就是閉包

自執(zhí)行函數(shù) 這里主要用來保存i的每一次值

如果直接加定時器，就不管外面循環(huán)，1s后才執(zhí)行，這時的i都不知道到哪里了，可能越界

Math.random()產(chǎn)生的值是setTimeout的一個參數(shù)，延遲的時間

setTimeout延遲時間也與電腦卡影響

transitionend只要過渡了就會執(zhí)行，它是根據(jù) 樣式來計算的

縮放和透明都會觸發(fā)transitionend

call()改變this指向的對象

然后就直接實現(xiàn)了，在加載頁面的時候就運行這個特效。

補上中間查到的一些資料：

1.CSS3 opacity 屬性：

2.HTML DOM scale() 方法：

參數(shù)

描述

scale() 方法為畫布的當前變換矩陣添加一個縮放變換?？s放通過獨立的水平和垂直縮放因子來完成。例如，傳遞一個值 2.0 和 0.5 將會導(dǎo)致繪圖路徑寬度變?yōu)樵瓉淼膬杀?，而高度變?yōu)樵瓉淼?1/2。指定一個負的 sx 值，會導(dǎo)致 X 坐標沿 Y 軸對折，而指定一個負的 sy 會導(dǎo)致 Y 坐標沿著 X 軸對折。

這里我直接一個參數(shù)就是同時縮小高度和寬度

3.

div是塊標簽，現(xiàn)在這種情況此div的標簽會被里面圖片高度自己撐起來，img標簽都是默認向左漂浮的，剛好每行10個每個80px
margin: 0 auto是margin: 0 auto 0 auto的簡寫，也就是左右自動居中，至于為什么沒有緊挨著上面的div，這個應(yīng)該是上面那個margin: 80px auto，已經(jīng)設(shè)置了跟下面的div外邊距80px距離

btn的高度沒有設(shè)置，靠font撐的

剩下就是代碼了，注釋很詳細，回調(diào)函數(shù)很多。。：