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 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
如何手写一个简易的 Vuex
Oct 10 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闭包定义与使用简单示例
2018/04/13 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
python简单贪吃蛇开发
2019/01/28 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python解释器安装教程的方法步骤
2020/07/02 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
中专生自我鉴定书范文
2013/12/28 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
教师党员一句话承诺
2014/03/28 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
优秀党员申报材料
2014/12/18 职场文书
检讨书怎么写
2015/01/23 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书