<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="float.js"></script> <script type="text/javascript"> window.onload = function () { var timer = null ; var num = 0; var len = 20; var str = ''; var adiv = document.getElementsByTagName('div'); var finished = true; var flag = true; for( var i = 0; i < len; i++) { str += '<div style="50px; height:50px; background:red; position:absolute; top:0px; left:'+ i*60 +'px;"></div>'; } document.body.innerHTML = str; document.onclick = function () { if(!finished) {return ;} finished = false; clearInterval(timer); timer = setInterval( function () { domove(adiv[num],'top',23,flag?500:0,num == len - 1?function (){ finished = true;flag = !flag; }:null); num++; if(len == num ) { clearInterval(timer); num = 0; } },100); } }; </script> </head> <body> </body> </html>
function getstyle(obj,attr) { return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } function domove (obj,attr,dir,target,endfn) { dir = parseInt(getstyle(obj,attr))<target?dir:-dir; clearInterval(obj.timer); obj.timer = setInterval( function () { var speed = parseInt(getstyle(obj,attr)) + dir; if(dir>0&&speed>target||dir<0&&speed<target) { speed = target; } obj.style[attr] = speed + 'px'; if( speed == target ) { clearInterval(obj.timer); endfn&&endfn(); } },30); };