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 String 对象
Apr 25 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
理解Python中函数的参数
2015/04/27 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python实现两个文件合并功能
2018/04/01 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
2014年上半年工作自我评价
2014/01/18 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
卫生系统先进事迹
2014/05/13 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
法律意见书范文
2015/05/20 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
Python内置数据类型中的集合详解
2022/03/18 Python