动态改变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 相关文章推荐
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
JS实现小米轮播图
Sep 21 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设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
利用pandas进行大文件计数处理的方法
2018/07/25 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
pytorch 常用线性函数详解
2020/01/15 Python
浅谈python锁与死锁问题
2020/08/14 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
《少年王冕》教学反思
2014/04/11 职场文书
体育运动会广播稿
2014/10/05 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
酒店前台岗位职责
2015/04/16 职场文书
2015年加油站工作总结
2015/05/13 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
经典祝酒词大全
2015/08/12 职场文书
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers