經過4個月的努力學習，迎來了進入市場的最後一個學習項目。自己模仿了一個圖檔展示效果，用在了項目中，感覺挺炫的。在這裡分享一下，希望大家喜歡~！
小的還是先上圖~
1.下圖是動作開始的圖檔，小方塊從各個位置飛來，組合在一起；
2.下圖是小方塊組合成的圖檔；
3.下圖是點選圖檔，小方塊散開飛走的效果；
剛開始想着做這個效果是因為在北京智能社的首頁上看見了這個幻燈片切換效果，當時我對前端，程式員都還沒有一點概念。
現在自己進入了這個行業，并且已經全日制的學習了4個月時間，是以就試着實作了下這個效果。當然，智能社首頁上的要比小弟這個高端不少。
下面，我闡述下我這個效果的思路：
1.既然整個圖檔容器是由很多小方塊組成的，那麼容器的寬度，就得是一行小方塊加起來的寬度，而高度就是一列小方塊的高度和；
2.給每一個小方塊設定背景圖檔，注意：每個小方塊的背景圖檔，都是一張完整的背景圖檔，即最後拼成的那張圖檔；
3.通過雙重for循環，控制每一個方塊的初始位置（為了讓小方塊均勻的配置設定到4個象限中，我用了4個if判斷，代碼顯得有些備援），之後它們會從初始位置飛入容器，拼在一起；
4.在沒有設定background-position時，小方塊中的圖檔顯示的是一樣的，都是圖檔左上角。要讓每個小方塊的顯示出來的圖檔拼起來正好是完整的圖檔，就需要根據這是第X行，第Y個小方塊來設定它的background-position，即第X行，第Y個小方塊的background-position值應該為：squareWidth*(Y-1)px squareHeight*(X-1)px，如果從循環中的 i , j 參數來看，正好對應！
5.觸發組合事件後，讓這些小方塊飛過來，根據 i,j 的值飛到各自在圖檔中的位置，這個位置是按順序的，是以也很好實作。
6.散開解體就是反過來就行啦~
好了，下面我貼出我自己的代碼，嘿嘿，雖然代碼很初級，可能看上去很低端，不過自己完成了一些喜歡的特效，并且同學們也很喜歡，還是感覺非常開心的。
最後幾天了，加油~Day day up!!!
下面是html代碼：
下面是CSS代碼：
這裡是js代碼：
最後這段隐藏容器的時候，如果直接用JQ中的hide立即執行的話，解體的動畫來來不及播放就display:none生效了。
是以我選擇了使用setTimeout讓 hide() 函數延遲到散開解體動畫執行完畢之後再執行。
這樣既有了動畫，也将這些方塊抽離了文檔流，用于圖檔展示的時候，解體圖檔後不至于擋住下層的内容。
好了，我的這個小效果就在這裡了~謝謝各位，也謝謝在4個月的學習中陪着我，一起成長起來的小夥伴~看來以後我們得一起坑代碼了！加油！