动态改变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中prototype用法详细介绍
Nov 14 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
Nuxt页面级缓存的实现
Mar 09 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-MySQL教程归纳总结
2008/06/07 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python函数返回值实例分析
2015/06/08 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
多版本Python共存的配置方法
2017/05/22 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
幼儿园小班植树节活动方案
2014/03/04 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
学校开学标语
2014/10/06 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫