12个div逐个显示效果

更新时间：2006年10月25日 00:00:00 作者：

这个效果一般可以用于导航栏目显示，图片显示。如果你的层名字不规则（不是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> <body onload="shoppingcat()"> <div id="container" align="center"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> <div id="div5">5</div> <div id="div6">6</div> <div id="div7">7</div> <div id="div8">8</div> <div id="div9">9</div> <div id="div10">10</div> <div id="div11">11</div> <div id="div12">12</div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

<!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 全选注:引入外部Js需再刷新一下页面才能执行]

12个div逐个显示效果

html5 canvas 详细使用教程
本文主要对html5 canvas的使用进行了详细的介绍。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
JavaScript降低代码圈复杂度优化技巧
当一个项目经过持续迭代,不断增加功能,逐渐变成一个复杂的产品时,新功能的开发变得相对困难,其中一个很大的原因是代码复杂度高,导致可维护性和可读性都很差,本文将从前端JavaScript的角度出发,介绍一些有效的方法和技巧来优化前端代码的圈复杂度
2023-10-10
javascript制作游戏开发碰撞检测的封装代码
这篇文章主要介绍了javascript制作游戏开发碰撞检测的封装代码,需要的朋友可以参考下
2015-03-03
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
这篇文章主要介绍了Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-09-09
JS实现深拷贝的几种简单方法示例
深拷贝和浅拷贝是在JavaScript中复制对象或数组时经常遇到的概念,下面这篇文章主要给大家介绍了关于JS实现深拷贝的几种简单方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-10-10
JavaScript从0开始构思表情插件
在项目开发阶段很多项目都会用到表情插件，接下来通过本文给大家介绍了JavaScript从0开始构思表情插件的相关资料,需要的朋友可以参考下
2016-07-07
简单实现js悬浮导航效果
这篇文章主要教大家如何简单实现js悬浮导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
小程序实现新用户判断并跳转激活的方法
这篇文章主要介绍了小程序实现新用户判断并跳转激活的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
JavaScript数据结构中串的表示与应用实例
这篇文章主要介绍了JavaScript数据结构中串的表示与应用,结合实例形式简单分析了基于javascript顺序操作实现串结构与串的拼接操作相关技巧,需要的朋友可以参考下
2017-04-04
JavaScript生成随机验证码代码实例
这篇文章主要介绍了JavaScript生成随机验证码代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09