JS实现三个层重叠点击互相切换的方法


Posted in Javascript onOctober 06, 2015

本文实例讲述了JS实现三个层重叠点击互相切换的方法。分享给大家供大家参考。具体如下:

该效果实现三个或多个重叠层,按一定规则重叠在一起,当你用鼠标点击任意层的时候,该层被显示在最上部,多个层交替切换,代码简单,同时学习CSS也是不错的参考范例,本例的功能需要JavaScript代码配合。

运行效果截图如下:

JS实现三个层重叠点击互相切换的方法

在线演示地址如下:

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三个或多个层重叠实现互相切换</title>
</head>
<body>
<div id="aaa" style="position:absolute;left:100px;top:100px;width:100px;height:100px;background-color:#ddeeff;z-index:1;" onclick="moveUp(this.id)"></div>
<div id="bbb" style="position:absolute;left:150px;top:130px;width:100px;height:100px;background-color:#eeffdd;z-index:2;" onclick="moveUp(this.id)"></div>
<div id="ccc" style="position:absolute;left:200px;top:160px;width:100px;height:100px;background-color:#ffddee;z-index:3;" onclick="moveUp(this.id)"></div>
<script type="text/javascript">
var divNo = document.getElementsByTagName("div").length;
function moveUp(id)
{
divNo++;
var box = document.getElementById(id);
box.style.zIndex=divNo;
}
</script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript背投广告代码的完善
Apr 08 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
jquery的live使用注意事项
Feb 18 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 #Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 #Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 #Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 #Javascript
javascript日期格式化方法汇总
Oct 04 #Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 #Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 #Javascript
You might like
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python使用matplotlib画饼状图
2018/09/25 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
.NET初级开发工程师面试题
2014/04/18 面试题
大学开学计划书
2014/04/30 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
酒店辞职书范文
2015/02/26 职场文书
学生会部长竞选稿
2015/11/19 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis