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


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将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
js实现缓动动画
Nov 25 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
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
Python导入模块时遇到的错误分析
2017/08/30 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
学生出入校管理制度
2014/01/16 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
旷课检讨书3000字
2014/02/04 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
校庆标语集锦
2014/06/25 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
房屋所有权证明
2014/10/20 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
乔迁新居祝福语
2019/11/04 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android