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 相关文章推荐
JavaScript原型继承之基础机制分析
Aug 26 Javascript
理解Javascript图片预加载
Feb 23 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
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开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
django ajax发送post请求的两种方法
2020/01/05 Python
python如何基于redis实现ip代理池
2020/01/17 Python
python能做哪些生活有趣的事情
2020/09/09 Python
python绘制趋势图的示例
2020/09/17 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
幼师自荐信范文
2013/10/06 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
五年级学生评语
2014/04/22 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
创先争优承诺书
2015/01/20 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js