zl程序教程

您现在的位置是:首页 >  后端

当前栏目

动态改变div的z-index属性的简单实例

实例属性 简单 动态 改变 index div
2023-06-13 09:15:04 时间
复制代码代码如下:

<scriptlanguage="javascript">
varMAX_INDEX=4;
functionchange(ddd)
{
if(ddd.style.zIndex<=MAX_INDEX)
{
ddd.style.zIndex=MAX_INDEX+1;
MAX_INDEX++;
}
}
</script>
<divid="layer1"onclick="javascript:change(this);"style="position:absolute;margin-left:100;margin-top:50px;margin-=100;width=100;height=100;background-color:#ff0000;z-index:1"></div>
<divid="layer2"onclick="javascript:change(this);"style="position:absolute;margin-left:120;margin-top:60px;margin-=120;width=100;height=100;background-color:#00ff00;z-index:2"></div>
<divid="layer3"onclick="javascript:change(this);"style="position:absolute;margin-left:140;margin-top:70px;margin-=140;width=100;height=100;background-color:#0000ff;z-index:3"></div>
<divid="layer4"onclick="javascript:change(this);"style="position:absolute;margin-left:160;margin-top:80px;margin-=160;width=100;height=100;background-color:#000000;z-index:4"></div>