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 相关文章推荐
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
AngularJS自动表单验证
Feb 01 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
理解javascript中的闭包
Jan 11 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
layUI的验证码功能及校验实例
Oct 25 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
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
javascript dom追加内容实现示例
2013/09/21 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
pygame实现飞机大战
2020/03/11 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
html5 视频播放解决方案
2016/11/06 HTML / CSS
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
学校周年庆活动方案
2014/08/22 职场文书
法院授权委托书格式
2014/09/28 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
清洁工工作总结
2015/08/11 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书