JS實現有點炫的圖片展示效果-圖片解體和組合

　　經過4個月的努力學習，迎來了進入市場的最后一個學習項目。自己模仿了一個圖片展示效果，用在了項目中，感覺挺炫的。在這里分享一下，希望大家喜歡~！

　　小的還是先上圖~

 　　http://runjs.cn/detail/tl9quyke 這個是效果的demo鏈接~慚愧，剛開始寫博，還不會在這邊加demo。正在嘗試中……

　　

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代碼：

<button onclick="bomb()">爆發吧！小宇宙！</button>

<div id="container">  //這個是容器
    <div class="login-bg"></div>
    <div class="login-bg"></div>
    <div class="login-bg"></div>
    <!--這里添加你需要的小方塊的數量的div，類名為依您喜歡，
     我的示例中是81個方塊，所以下面i和j的條件是 “小於9”-->
</div>

　　　　下面是CSS代碼：

#container{
    position: absolute;
    width: 360px;
    height: 360px;
    z-index: 10000;
    top: 150px;
    left: 50%;
    margin-left: -270px;
    display: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.login-bg{
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url("login-bg7.png");
    background-size: 360px 360px;
    opacity: 0;
}

　　　　這里是js代碼：

　　　　

var bgArr = $(".login-bg");   //獲取所有背景小方塊存入數組中
for(var i=0;i<9;i++){          //雙重for循環初始化每一個小方塊的位置，通過隨機數，分別把它們放到4個象限，i控制行，j控制列
    for(var j=0;j<9;j++){
        $(bgArr[9*i+j]).css({           //分別設置每個小方塊的背景位置
            backgroundPosition:-40*j+"px "+(-40*i)+"px"
        })
        if(j%4==0){       //將滿足條件的小方塊放置到第二象限
            $(bgArr[9*i+j]).css({
                top:parseInt(Math.random()*600)+"px",
                left:parseInt(Math.random()*600)+"px"
            });
        }else if(j%4==1){       //將滿足條件的小方塊放置到第四象限
            $(bgArr[9*i+j]).css({
                top:-parseInt(Math.random()*600)+"px",
                left:-parseInt(Math.random()*600)+"px"
            });
        }else if(j%4==2){           //將滿足條件的小方塊放置到第三象限
            $(bgArr[9*i+j]).css({
                top:parseInt(Math.random()*600)+"px",
                left:-parseInt(Math.random()*600)+"px"
            });
        }else if(j%4==3){           //將滿足條件的小方塊放置到第一象限
            $(bgArr[9*i+j]).css({
                top:-parseInt(Math.random()*600)+"px",
                left:parseInt(Math.random()*600)+"px"
            });
        }
    }
}

function bomb(){        //關鍵函數
    $("#container").show();    //顯示背景小方塊的容器
    for(var i=0;i<9;i++){
        for(var j=0;j<9;j++){
            $(bgArr[9*i+j]).animate({    //小方塊飛入容器范圍內的動畫
                top:40*i+"px",          //雙重for循環設置方塊組合后的位置
                left:40*j+"px",
                opacity:1
            },1000);
        }
    }
}

$("#container").click(function(){       //圖片組合后，當容器被點擊時，小方塊散開，圖片解體
    for(var i=0;i<9;i++){                 //雙重for循環再次讓方塊向四個象限散去
        for(var j=0;j<9;j++){
            if(j%4==0){
                $(bgArr[9*i+j]).animate({
                    top:parseInt(Math.random()*600)+"px",
                    left:parseInt(Math.random()*600)+"px",
                    opacity:0
                },1000);
            }else if(j%4==1){
                $(bgArr[9*i+j]).animate({
                    top:-parseInt(Math.random()*600)+"px",
                    left:-parseInt(Math.random()*600)+"px",
                    opacity:0
                },1000);
            }else if(j%4==2){
                $(bgArr[9*i+j]).animate({
                    top:parseInt(Math.random()*600)+"px",
                    left:-parseInt(Math.random()*600)+"px",
                    opacity:0
                },1000);
            }else if(j%4==3){
                $(bgArr[9*i+j]).animate({
                    top:-parseInt(Math.random()*600)+"px",
                    left:parseInt(Math.random()*600)+"px",
                    opacity:0
                },1000);
            }


        }
    }
    setTimeout(hideBg,1100);        //隱藏容器，一定要讓容器脫離文檔流，否則可能會遮擋住下層的頁面信息
});
function hideBg(){              //隱藏容器（包括其中的小方塊）
    $("#container").hide();　　　
}

 

　　　　最后這段隱藏容器的時候，如果直接用JQ中的hide立即執行的話，解體的動畫來來不及播放就display:none生效了。

　　　　所以我選擇了使用setTimeout讓  hide() 函數延遲到散開解體動畫執行完畢之后再執行。

　　　　這樣既有了動畫，也將這些方塊抽離了文檔流，用於圖片展示的時候，解體圖片后不至於擋住下層的內容。

　　　　好了，我的這個小效果就在這里了~謝謝各位，也謝謝在4個月的學習中陪着我，一起成長起來的小伙伴~看來以后我們得一起坑代碼了！加油！