12个div逐个显示效果

最新推荐文章于 2022-08-26 10:53:59 发布

So_CooL

最新推荐文章于 2022-08-26 10:53:59 发布

阅读量1.1k

点赞数

文章标签： div border xhtml html function float

<!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">
#container{
    position:absolute;
    border:1px solid #666;
    padding:10px;
}
#container li{
    display:none;
    list-style:none;
    float:left;
    margin:1px;
    padding:20px;
    width:80px;
    height:80px;
    border:3px #ccc double;
    background:#eee;
    font:30px Verdana, Arial, Helvetica, sans-serif;
    color:#666;
}
#container .orderly-change{
    border:3px #666 double;
    background:#ccc;
}
</style>
</head>
<body>
<ul id="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<script type="text/javascript">
var i=0,j
function orderly_show(){
    var container_li=document.getElementById("container").getElementsByTagName("li");
    if(i<container_li.length){
        container_li[i].style.display="block";
        if(j<container_li.length){
            container_li[j].className="orderly-change";
        }
        i++;
        j=i-1;
    }
    else if(i=container_li.length){
        container_li[j].className="orderly-change";
    }
    setTimeout("orderly_show()",500);
}
orderly_show();
</script>
</body>
</html>