javascript下雨

掉落的盒子

*{
			margin: 0;
			padding: 0;
			text-align: center;
			}
		li{
			margin-top: 0px;
			list-style: none;
			display: block;
			float: left;
			width: 50px;
			height: 50px;
			margin-left: 10px;
			background-color: blue;
				/*transition: all .5s;*/
			position: relative;
			}
		ul{
			height: 768px;
			width: 100%;
			margin: 0 auto;
				
			}
		#bigbox {
			position: fixed;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0);
			z-index: 0;
	
		}
		#box{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 999;
		}
	

<div id="bigbox">
			
		</div>
		<div id="box">
			<ul class="box"></ul>
		</div>

		<script src="index.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		var box=document.getElementsByClassName("box")[0];
		var li=document.getElementsByTagName("li");
		var bigbox=document.getElementById("bigbox");
		var time;
		for(i=0;i<20;i++){
			box.innerHTML+="<li></li>";
		}
		var index=true;
		box.onclick=function(){
			var n=0;
			if(index){
				var time=setInterval(function(){
					stobj(li[n],'top',20,500)
					bigbox.style.zIndex=9999;
					if(n>=19){
						clearInterval(time);
						bigbox.style.zIndex=0;
					}
					n++;
				},160)
				index=false;
			}else{
				var time=setInterval(function(){
					stobj(li[n],'top',20,0)
					bigbox.style.zIndex=9999;
					if(n>=19){
						clearInterval(time);
						bigbox.style.zIndex=0;
					}
					n++;
				},160)
				index=true;
			}
			
		}
		
		</script>

引入的js代码

function leftSty(obj,attr){
			if(obj.currentStyle){
				return obj.currentStyle[attr];
			}else{
				return getComputedStyle(obj)[attr]
			}
		}
		function stobj (obj,attr,step,target) {
			var left=parseInt(leftSty(obj,attr));
			step=left>=target?-step:step;
			var time3=setInterval(function(){
				left=left+step;
				//一个判断正数    第二个判断负数
				if((left >= target && step > 0)||(left <= target && step <0)){
					left=target;
					clearInterval(time3);
				}
				obj.style[attr]=left+'px';//(li[0],'marginTop',11,500)
			},50)
		}

效果图