JS实现有点炫的图片展示效果-图片解体和组合

<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>

#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;
}

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();　　　
}