首页 > 代码库 > 一排下去再上来的div

一排下去再上来的div

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script src="http://www.mamicode.com/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); };

 

一排下去再上来的div