图片或者元素模块碎片化降落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:250px;
            height:250px;
            position:absolute;
            top:0;
            left:50%;
            margin-top:0px;
            margin-left:-125px;
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
<script>
    window.onload=function(){
        var bWidth=box.offsetWidth;
        var bHeight=box.offsetHeight;
        for(var i=0;i<20;i++){
            for(var j=0;j<20;j++){
                var oDiv=document.createElement('div');
                oDiv.style.width=bWidth/20+'px';
                oDiv.style.height=bHeight/20+'px';
                oDiv.style.position="absolute";
                oDiv.style.top=(bHeight/20)*i+'px';
                oDiv.style.left=(bWidth/20)*j+'px';
                oDiv.style.background='#ccc';
                oDiv.style.transition=(Math.random()*0.2+0.3)+'s all ease';
                box.appendChild(oDiv);

            }
        }
        var index=box.children.length-1;
        var timer=null;
        window.onclick=function(){
            if(index==box.children.length-1){
                clearInterval(timer);
                timer=setInterval(function(){
                    box.children[index].style.top=box.children[index].offsetTop+400+'px';
                    index--;
                    if(index==-1){
                        clearInterval(timer);
                        index=0;
                        return;
                    }
                },10)
            }else{
                clearInterval(timer);
                timer=setInterval(function(){
                    box.children[index].style.top=box.children[index].offsetTop-400+'px';
                    index++;
                    if(index==box.children.length){
                        clearInterval(timer);
                        index=box.children.length;
                        return;
                    }
                },10)
            }
        }
    }
</script>
</html>
图片或者元素模块碎片化降落

猜你喜欢
