动态改变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 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
详解javascript函数的参数
Nov 10 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
5个实用的JavaScript新特性
Jun 16 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动态生成静态HTML网页的代码
2010/03/04 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python openCV获取人脸部分并存储功能
2019/08/28 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
2014学雷锋活动总结
2014/03/09 职场文书
五一劳动节活动记录
2014/03/23 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
导游词之天津盘山
2019/11/01 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
Java spring单点登录系统
2021/09/04 Java/Android
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android