原生javascript 元素依次掉落及上升
一、实现原理：
① 通过onoff开关，判断元素是往下走 还是往上走，并在每次清除定时器后，把onoff 设为 !onoff，以便下次点击做判断
②move函数的运用
二、代码
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin:0;padding: 0;} div{position: absolute; width:40px; height:40px; background: red; top: 0} </style> </head> <body> <div></div> <script type="text/javascript"> window.onload = function(){ var box = document.getElementsByTagName('div'); //动态获取未来元素 var len = 16; var str = ''; var timer = null; var num = 0; var onoff = true; //点击开关 // 动态生成div标签 for (var i = 0; i < len; i++) { str += "<div style='left:"+(i*50)+"px;'></div>" } document.body.innerHTML = str; document.onclick = function(){ // 清除定时器 clearInterval(timer); // 判断往下还是往上 if(onoff){ // 开启定时器，让元素挨个往下掉 timer = setInterval(function(){ move(box[num],'top',10,500); num++; // 当最后一个掉完，清除定时器，并把开关设为false，把num重置为0 if(num == len){ clearInterval(timer); onoff = !onoff; num = 0; } },100) }else{ // 开启定时器，让元素挨个往上走 timer = setInterval(function(){ move(box[num],'top',10,0); num++; // 当最后一个升完，清除定时器，并把开关设为true，把num重置为0 if(num == len){ clearInterval(timer); onoff = !onoff; num = 0; } },100) } } /* obj:要运动的元素 attr:属性 dir:步长 target:目标点 endFn:回调函数 */ function move(obj,attr,dir,target,endFn){ //根据元素当前位置和目标点的比较，动态设置步长为正数或负数 dir = parseInt( getStyle(obj,attr) ) < target ? dir : -dir; // 1、清除定时器 clearInterval(obj.timer); // 2、设置定时器 obj.timer = setInterval(function(){ // 3、获取元素当前位置+步长 var speed = parseInt( getStyle(obj,attr) ) + dir; // 4、如果元素当前位置超过目标点，则把当前位置==目标点 if( speed > target && dir > 0 || speed < target && dir < 0){ speed = target } // 5、设置元素位置 obj.style[attr] = speed + 'px'; // 6、判断是否到达目标点，如果到达则停止定时器 if(speed == target){ clearInterval(obj.timer); // 回调函数，如果endFn存在则执行 endFn && endFn(); } },20) } /* 获取非行间样式： 标准浏览器下 getComputedStyle(obj)[attr] IE浏览器下 obj.currentStyle[attr] */ function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; } } </script> </body> </html>
