點選元素依次下落,在點選依次上升
阿新 • • 發佈:2018-12-07
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script> window.onload=function(){ //建立div for(var i=0;i<10;i++){ var oDiv=document.createElement('div'); oDiv.style.width="100px"; oDiv.style.height="100px"; oDiv.style.background="blue"; oDiv.style.position="absolute"; oDiv.style.left=i*110+'px'; oDiv.style.top="0px"; oDiv.style.transition="0.5s all ease"; document.body.appendChild(oDiv); } var allDiv=document.getElementsByTagName('div'); var index=0; var num=1; var timer=null; document.onclick=function(){ if(num==2)return; num=2; if(index==0){ clearInterval(timer); timer=setInterval(function(){ allDiv[index].style.top="500px"; index++; if(index==allDiv.length){ index=allDiv.length-1; num=1; return; } },50); }else{ clearInterval(timer); timer=setInterval(function(){ allDiv[index].style.top="0px"; index--; if(index==-1){ index=0; num=1; return; } },50) } } } </script> </html>