圖片或者元素模組碎片化降落
阿新 • • 發佈:2018-12-07
<!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>