<!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.οnlοad=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.οnclick=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>
11-03
357
357
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
