一排元素往下掉
需求:点击当前元素,看看是否有上个兄弟节点或者下个兄弟节点,如果有就让他们依次下落(当前元素也会下落),否则就不用下落
HTML
<div id="box"></div>
CSS
#box{ position: relative; margin: 20px auto; } #box div{ width: 50px; height: 50px; background: red; position: absolute; top: 0px; }
JS
var Box=document.getElementById("box"); var aDiv=Box.getElementsByTagName("div"); var num=0; var num1=0; var timer=null; var timer1=null; //生成div for (var i=0;i<10;i++) { Box.innerHTML+="<div style='left:"+i*60+"px;'></div>"; } for (var i=0;i<aDiv.length;i++) { aDiv[i].index=i; aDiv[i].onclick=function(){ //用两个变量保存点击的div的下标 num1=num=this.index; //被点击的div先往下运动 moveTo(aDiv[num],"top",200,10); //然后被点击的div两侧的div依次往下掉落 //控制被点击的div右边的div下落 if(this.index<9){ timer=setInterval(function(){ if(num>=8){ clearInterval(timer); } num++; moveTo(aDiv[num],"top",200,10); },500) } //控制被点击的div左边的div下落 if(this.index>0){ timer1=setInterval(function(){ if(num1<=1){ clearInterval(timer1); } num1--; moveTo(aDiv[num1],"top",200,10); },500) } } } //运动函数 function moveTo(obj,attr,target,dir,endFn){ clearInterval(obj.timer); dir=parseInt(getStyle(obj,attr))<target?dir:-dir; obj.timer=setInterval(function(){ var speed=parseInt(getStyle(obj,attr))+dir; if(speed>target&&dir>0||speed<target&&dir<0){ speed=target; } obj.style[attr]=speed+"px"; //清除定时器 if(speed==target){ clearInterval(obj.timer); if(endFn){ endFn(); } } },30) } //获得元素样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj)[attr]; } }