📄 15-30.htm
字号:
<html><head><title>动态改变对象的前后位置 </title>
<script language="JavaScript">
function changePos(id){
var box= document.getElementById(id);
if(box.style.zIndex == 50){ // 50作为Z轴的最大值
box.style.zIndex=2;
}
else if(box.style.zIndex != 3){
box.style.zIndex=50;
}
else{
box.style.zIndex=0;
}
}
</script>
</head>
<body bgcolor=lightgreen>
<span id="red" style="position: absolute;z-index:0;
background-color:red; width:200; height:250;top:50px; left:160px;"
onClick="changePos(id);"></span>
<span id="yellow" style="position: absolute;z-index:1;
background-color:yellow; width:90; height:300;top:20px; left:210px;"
onClick="changePos(id);"></span>
<span id="blue" style="position: absolute;z-index:2;
background-color:blue; width:250; height:100;top:125px; left:134px;"
onClick="changePos(id);"></span>
<span id="white" style="position: absolute;z-index:3;
background-color:white; width:50; height:50;top:140px; left:230px;"
onClick="changePos(id);"></span>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -