点击鼠标切换三个相互重叠的层,纯js实现_网页布局

点击鼠标切换三个相互重叠的层,纯js实现: 发布时间：2019-08-22编辑：脚本学堂

一个不错的层切换效果，在网页上有三个层按一定次序互相重叠，鼠标点击任意一个层，该层会在最顶层显示，其它层被遮挡，点击鼠标即可实现自由切换。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
    <title>点击鼠标切换三个重叠的层</title>
    <script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>">
function $(obj){
return document.getElementById(obj);
}
function change(n){
for (var i=1;i<4;i++){
if(n==i){
$("a"+i).style.zIndex="100";
}else{
$("a"+i).style.zIndex="0";
}
}
}
</script>
    </head>
    <body>
    <div id="a1" style="position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:#ddeeff;z-index:1" onclick_fckprotectedatt="%20onclick%3D%22change('1')%22" ></div>
    <div id="a2" style="position:absolute;left:150px;top:130px;width:100px;height:100px;background-color:#eeffdd;z-index:2" onclick_fckprotectedatt="%20onclick%3D%22change('2')%22"></div>
    <div id="a3" style="position:absolute;left:200px;top:160px;width:100px;height:100px;background-color:#ffddee;z-index:3" onclick_fckprotectedatt="%20onclick%3D%22change('3')%22"></div>
    </body>
    </html>

提示：可修改代码后再运行!

上一篇：jquery实现层的显示与隐藏
下一篇：使用jquery实现的可伸缩与展开的层控制面板

与点击鼠标切换三个相互重叠的层,纯js实现有关的文章

本文标题：点击鼠标切换三个相互重叠的层,纯js实现
本页链接：http://www.jb200.com/tx/12.html

点击鼠标切换三个相互重叠的层,纯js实现