多个重叠的层点击显示当前层效果
本章节分享一段代码实例,它实现了多个重叠的层中,点击当前层能够将其设置为最顶层显示。
下面直接看代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>前端教程网</title> <style> #a0{ position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ddeeff; z-index:1; } #a1{ position:absolute; left:150px; top:130px; width:100px; height:100px; background-color:#eeffdd; z-index:2; } #a2{ position:absolute; left:200px; top:160px; width:100px; height:100px; background-color:#ffddee; z-index:3; } </style> <script type="text/javascript"> function $(obj){ return document.getElementById(obj); } function change(n){ for (var i=0;i<3;i++){ if(n==i){ $("a"+i).style.zIndex="100"; } else{ $("a"+i).style.zIndex="0"; } } } window.onload=function(){ var odivs=document.getElementsByTagName("div"); for(var index=0;index<odivs.length;index++){ (function(index){ odivs[index].onclick=function(){ change(index) } })(index) } } </script> </head> <body> <div id="a0"></div> <div id="a1"></div> <div id="a2"></div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function $(obj){ return document.getElementById(obj);
},模拟实现了jquery的id选择器,能够获取具有指定id的元素对象。
(2).function change(n){},此方法实现了设置元素的z-index值得效果,也就是决定了哪个元素在上面,参数是一个标识,具体作用下面会有介绍。
(3).for (var i=0;i<3;i++){},因为这里只有3个元素,并且从0开始的,所以进行从0到小于3的遍历操作。
(4).if(n==i){
$("a"+i).style.zIndex="100";
},如果n等于i,那就是相当于遇到当前点击的元素了,那么就将id属性值为"a"+i的元素的z-index属性值设置为100.
(5).else{
$("a"+i).style.zIndex="0";
},如果不是当前点击的元素,那么就将z-index属性值设置为0。
(6).window.onload=function(){},当元素内容完全加载完毕再去执行函数中的代码。
(7).var odivs=document.getElementsByTagName("div"),获取div元素集合。
(8).for(var index=0;index<odivs.length;index++){},遍历每一个div元素。
(9).(function(index){
odivs[index].onclick=function(){
change(index)
}
})(index),采用闭包方式为每一个元素注册onclick事件处理函数。
二.相关阅读:
(1).z-index属性可以参阅CSS z-index一章节。
(2).document.getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。