怎么让橘色的块重复掉下来.?

就是每隔3秒就重复掉下来.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
                                   
<style type="text/css">
ul{list-style:none;}
*{margin:0;padding:0;}
#wrap{width:200px;overflow:hidden;height:102px;}
#con{width:250%;}
#list1{float:left;margin-top:2px;width:100px;height:10px;background:orange;}
#wrap01{position:relative;width:250px;margin:175px auto 0;}
#num{width:30px;height:20px;background:pink;text-align:center}
#test li{width:100px;height:100px;float:left;margin-left:5px;display:inline;background:orange;}
</style>

</head>
<body><div id="test">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div style="clear:both"></div>
</ul>
</div>
 
 <script type="text/javascript">
 
var $ = function (id){ return document.getElementById(id)};
var ypos = 0;
function test(){
var test = $("test");
test.style.position = "absolute";
test.style.left = "20%";
if(ypos == 200){
clearTimeout(elem);
return true;

}
if(ypos < 200){
var dist = Math.ceil((200 - ypos)/260);
ypos = ypos + dist;
}
if(ypos > 200){
var dist = Math.ceil((ypos - 200)/260);
ypos = ypos - dist;
}
test.style.top = ypos+"px";
var elem = setTimeout("test()",10);
}
window.onload  = test;
</script>
 

</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
                                       
            <style type="text/css">
            ul{list-style:none;}
            *{margin:0;padding:0;}
            #wrap{width:200px;overflow:hidden;height:102px;}
            #con{width:250%;}
            #list1{float:left;margin-top:2px;width:100px;height:10px;background:orange;}
            #wrap01{position:relative;width:250px;margin:175px auto 0;}
            #num{width:30px;height:20px;background:pink;text-align:center}
            #test li{width:100px;height:100px;float:left;margin-left:5px;display:inline;background:orange;}
            </style>
            
    </head>
    <body><div id="test">
            <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <div style="clear:both"></div>
            </ul>
    </div>
             
             <script type="text/javascript">
             
                    var $ = function (id){ return document.getElementById(id)};
                        var ypos = 0;
                        function test(){
                                var test = $("test");
                                test.style.position = "absolute";
                                test.style.left = "20%";
                                if(ypos == 200){
                                            clearTimeout(elem);
    test.style.top = '0px';
    ypos = 0;
    setTimeout("test()",3000)
                                            return true;
                                            
                                }
                                if(ypos < 200){
                                            var dist = Math.ceil((200 - ypos)/260);
                                            ypos = ypos + dist;
                                }
                                if(ypos > 200){
                                            var dist = Math.ceil((ypos - 200)/260);
                                            ypos = ypos - dist;
                                }
                                test.style.top = ypos+"px";
                                var elem = setTimeout("test()",10);
                        }
                        window.onload  = test;
            </script>
             
            
    </body>
    </html>