JavaScript实现多个重叠层点击切换效果的方法


Posted in Javascript onApril 24, 2015

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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三个层重叠,点击可切换</title>
<script type="text/javascript">
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="change('1')" >
</div>
<div id="a2" 
style="position:absolute;left:150px;top:130px;width:100px;height:100px;
background-color:#eeffdd;z-index:2" onclick="change('2')">
</div>
<div id="a3" 
style="position:absolute;left:200px;top:160px;width:100px;height:100px;
background-color:#ffddee;z-index:3" onclick="change('3')">
</div>
<div>https://3water.com/</div>
</body>
</html>

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

Javascript 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
javascript实现的右下角弹窗实例
Apr 24 #Javascript
js上传图片及预览功能实例分析
Apr 24 #Javascript
浅谈jquery事件处理
Apr 24 #Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 #Javascript
JS实现简单的键盘打字的效果
Apr 24 #Javascript
javascript中replace( )方法的使用
Apr 24 #Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 #Javascript
You might like
php htmlspecialchars加强版
2010/02/16 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php 购物车完整实现代码
2014/06/05 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
详谈js模块化规范
2017/07/07 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
Python语法快速入门指南
2015/10/12 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python tornado微信开发入门代码
2018/08/24 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
关于学习的演讲稿
2014/05/10 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
2015年女职工工作总结
2015/05/15 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server