动态改变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代码执行效率
May 05 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
javascript闭包的理解
Apr 01 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
详解JavaScript中的this指向问题
Feb 05 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中explode函数用法分析
2014/11/15 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
几行js代码实现自适应
2017/02/24 Javascript
Vue.use源码分析
2017/04/22 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python数据结构之图的应用示例
2018/05/11 Python
详解Python3的TFTP文件传输
2018/06/26 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
python实现批量转换图片为黑白
2020/06/16 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
开业庆典主持词
2014/03/21 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
实用求职信模板范文
2019/05/13 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电