动态改变div的z-index属性的简单实例


Posted in Javascript onAugust 08, 2013
<script language="javascript"> 
var MAX_INDEX=4; 
function change(ddd) 
{ 
if(ddd.style.zIndex<= MAX_INDEX) 
{ 
ddd.style.zIndex = MAX_INDEX+1; 
MAX_INDEX++; 
} 
} 
</script> 
<div id="layer1" onclick="javascript:change(this);" style="position:absolute;margin-left:100;margin-top:50px;margin-=100;width=100;height=100;background-color:#ff0000;z-index:1"></div> 
<div id="layer2" onclick="javascript:change(this);" style="position:absolute;margin-left:120;margin-top:60px;margin-=120;width=100;height=100;background-color:#00ff00;z-index:2"></div> 
<div id="layer3" onclick="javascript:change(this);" style="position:absolute;margin-left:140;margin-top:70px;margin-=140;width=100;height=100;background-color:#0000ff;z-index:3"></div> 
<div id="layer4" onclick="javascript:change(this);" style="position:absolute;margin-left:160;margin-top:80px;margin-=160;width=100;height=100;background-color:#000000;z-index:4"></div>
Javascript 相关文章推荐
JS重要知识点小结
Nov 06 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
JS array数组检测方式解析
May 19 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 #Javascript
JS+css 图片自动缩放自适应大小
Aug 08 #Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 #Javascript
js获得地址栏?问号后参数的方法
Aug 08 #Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 #Javascript
js动态创建、删除表格示例代码
Aug 07 #Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 #Javascript
You might like
php的一个登录的类 [推荐]
2007/03/16 PHP
PHP 输出缓存详解
2009/06/20 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
用于table内容排序
2006/07/21 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
numpy排序与集合运算用法示例
2017/12/15 Python
Python生成器以及应用实例解析
2018/02/08 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python新手学习装饰器
2020/06/04 Python
django使用graphql的实例
2020/09/02 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
2014年师德师风学习材料
2014/05/16 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
法院个人总结
2015/03/03 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记