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


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 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
javascript Demo模态窗口
Dec 06 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
React Fragment介绍与使用详解
Nov 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
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
PHP学习之整理字符串
2011/04/17 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
Python常见数据结构详解
2014/07/24 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
python创建临时文件夹的方法
2015/07/06 Python
python 容器总结整理
2017/04/04 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
升国旗演讲稿
2014/09/05 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
Django使用echarts进行可视化展示的实践
2021/06/10 Python