12个div逐个显示效果
12个div逐个显示效果
发布时间:2016-12-30 来源:查字典编辑
摘要:这个效果一般可以用于导航栏目显示,图片显示。如果你的层名字不规则(不是div1、2、3...),可以先把她们放在数组里,然后调用。无标题文档...

这个效果一般可以用于导航栏目显示,图片显示。如果你的层名字不规则(不是div1、2、3...),可以先把她们放在数组里,然后调用。

无标题文档 #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 } 1 2 3 4 5 6 7 8 9 10 11 12

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

顺序显示 #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; } 1 2 3 4 5 6 7 8 9 10 11 12

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类