15-30.htm

来自「有关JAVASCRIPT的源代码教程」· HTM 代码 · 共 33 行

HTM
33 行
字号 
    <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>

15-30.htm - 源码说明

本页面展示了「有关JAVASCRIPT的源代码教程」中的 15-30.htm 源码文件，采用 HTM 编程语言编写，共 33 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫开发者社区收录了大量与JavaScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?