12个div逐个显示效果- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 12个div逐个显示效果

Javascript: 推荐js实现商品分类到搜索栏友好提示（人机交互）; attachEvent的使用方法与传递参数[IE|firefox]; 用javascript实现鼠标框选; 一个不错的动感导航菜单; JavaScript网页制作特殊效果用随机数; 一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera; js实现的的文字自动''到google search框; JS值当前DIV的ID值的代码; 在javascript中，如果删除二维数组中重复的元素; 一个用js实现的页内搜索代码; 不用MOUSEMOVE也能滑动啊; asp 的分词实现代码; 更正确的asp冒泡排序; 用Javscript实现表单复选框的全选功能; 向fckeditor编辑器插入指定代码的方法; javascript实现在光标处插入指定内容; 如何实现动态删除javascript函数; javascript父子通信; JS获取scrollHeight问题想到的标准问题; 從博客網扣了一個效果出來

No. « ‹ 68 69 70 71 › »

技术文章搜索

关键字

Javascript 中的 12个div逐个显示效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 248 ::

收藏到网摘: n/a

怎样调用动态获取的自定义对象的方法挺酷的一个倒计时

这个效果一般可以用于导航栏目显示，图片显示。如果你的层名字不规则（不是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 全选提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:

<!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 全选提示:你可先修改部分代码,再按运行]

怎样调用动态获取的自定义对象的方法挺酷的一个倒计时

Javascript 中的 12个div逐个显示效果

评论 (0) All