用簡短的javascript代碼編寫出愛新鮮抽屜式特效

發現很多大型網站都很喜歡用這種抽屜式的banner圖，所以今天就寫了一個愛新鮮的抽屜式banner圖分享給大家。

點擊查看動態效果圖

知識點：企業佈局技巧，如何高效的編寫CSS樣式，常用選擇器，基本標籤，動態佈局，盒子模型，jquery類庫調用，JS特效編寫，JS編程思維等。

ps.因為代碼發出不方便閱讀，所以就只截圖發源碼思路了。完整的源碼及思路，可以加web前端交流學習群611256580（資料+源碼+視頻）

html佈局：

1.HTML結構 用標籤去表示這樣一個結構

2.先從大的方向去分析頁面結構

3.找到這個屬性的歸屬者（標籤）

4.定義這個區域的結構

5.定義這個盒子的寬高（固定 ， 自適應 ，百分比）

6.因為margin padding會影響到盒子與盒子 內容與邊框之間的位置關係3

7.確認盒子位置（內外邊距 定位 浮動）

8.要確認盒子內部的內容

9.怎麼把盒子疊到一塊，實際上是改變這些盒子的位置

10.找到改變位置的盒子給絕對定位 這個盒子的參照物是誰

html佈局

css樣式

javascript

ps.大家覺得還有什麼樣的方式可以編寫抽屜式banner呢？可以在評論裡說出來，有什麼問題也可以在評論裡提出來。