动态改变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 高级篇之函数 (四)
Apr 07 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
webpack入门必知必会
Jan 16 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
详解python分布式进程
2018/10/08 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
django中的图片验证码功能
2019/09/18 Python
python实现按日期归档文件
2021/01/30 Python
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
信息专业学生学习的自我评价
2014/02/17 职场文书
服务员态度差检讨书
2014/10/28 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL