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

weixin_34219944發表於2014-07-13
JS
原文: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個月的學習中陪著我，一起成長起來的小夥伴~看來以後我們得一起坑程式碼了！加油！

 

 

 

 

 

 

相關文章