实现局部遮罩与关闭原理及代码


Posted in Javascript onFebruary 04, 2013
//实现局部遮罩 
<script type="text/javascript"> 
function Shade(){ 
var s = document.getElementById("shade"); 
s.style.display = "block"; 
} 
function Display(){ 
var d = document.getElementById("shade"); 
d.style.display = "none"; 
} 
</script> 
<style type="text/css"> 
#box{ 
width:400px; 
height:300px; 
position:relative; 
margin:0px auto; 
border:1px solid #000; 
} 
#shade{ 
width:400px; 
height:300px; 
background-color:gray; 
position:absolute; 
z-index:999; 
left:0px; 
top:0px; 
-moz-opacity:0.5;/*Firefox*/ 
opacity:0.5;/*Opera*/ 
filter:alpha(opacity=50); /*IE*/ 
} 
</style> 
</head> <body> 
<div id = "box"> 
<a href = "javascript:Shade()">局部遮罩</a> 
<div id = "shade"></div> 
</div> 
<a href = "javascript:Display()">遮罩消失</a> 
</body>
Javascript 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
js实现网站首页图片滚动显示
Feb 04 #Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 #Javascript
js网页中的(运行代码)功能实现思路
Feb 04 #Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 #Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 #Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 #Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 #Javascript
You might like
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
package.json配置文件构成详解
2019/08/27 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python 接口返回的json字符串实例
2018/03/27 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
初婚未育证明
2014/01/15 职场文书
中学生操行评语
2014/04/24 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
解除租赁合同协议书
2016/03/21 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python