码迷,mamicode.com
首页 > 其他好文 > 详细

一排下去再上来的div

时间:2014-12-23 00:03:34      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

<!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); 
};

 

一排下去再上来的div

标签:

原文地址:http://www.cnblogs.com/mayufo/p/4179271.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!