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


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 巧妙去除数组中的重复项
Jan 25 Javascript
JS的反射问题
Apr 07 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 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面向对象法则
2012/02/23 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php实现文件编码批量转换
2014/03/10 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python实现ssh批量登录并执行命令
2016/10/25 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
Linux常见面试题
2016/10/04 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
销售心得体会
2014/01/02 职场文书
小小商店教学反思
2014/04/27 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
python requests模块的使用示例
2021/04/07 Python