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


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 函数replace深入了解
Mar 14 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
详解jQuery事件
Jan 13 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
原生javascript如何实现共享onload事件
Jul 03 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
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
javascript判断非数字的简单例子
2013/07/18 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
python K近邻算法的kd树实现
2018/09/06 Python
python实现多张图片拼接成大图
2019/01/15 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
weblogic面试题
2016/03/07 面试题
儿科护士自我鉴定
2013/10/14 职场文书
安全生产月活动总结
2014/05/04 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
杨善洲观后感
2015/06/04 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Python Socket编程详解
2021/04/25 Python
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
MySQL 如何限制一张表的记录数
2021/09/14 MySQL