页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

12个div逐个显示效果

发布：dxy 字体：[增加减小] 类型：转载

这个效果一般可以用于导航栏目显示，图片显示。如果你的层名字不规则（不是div1、2、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"> 
#container{ width:60%; height:80%; position:absolute; text-align:center} 
#div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9,#div10,#div11,#div12{ width:80px; height:80px; background:#eeeeee; margin:0 2px 2px 0; padding:20px; border:3px #ccc double; font:30px Verdana, Arial, Helvetica, sans-serif; color:#666; float:left; display:none } 
</style> 
<script language="javascript"> 
var i=1,j 
function shoppingcat(){ 
if(i<=12){ 
document.getElementById('div'+i).style.display='block' 
if((j>=1)&&(j<=11)){ 
document.getElementById('div'+j).style.border='3px #666 double' 
document.getElementById('div'+j).style.background='#ccc'} 
i++ 
j=i-1 
setTimeout('shoppingcat()',500) 
} 
else if(i=13) 
{document.getElementById('div'+j).style.border='3px #666 double' 
document.getElementById('div'+j).style.background='#ccc'} 
} 
</script> 
</head>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:

<!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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：12个div逐个显示效果