<!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="width: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);
};
