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


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实现打开本地文件或文件夹
Mar 09 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
利用JS实现数字增长
Jul 28 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
用Python进行TCP网络编程的教程
2015/04/29 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
python实现TCP文件传输
2020/03/20 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
高考备战决心书
2014/03/11 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
放假通知范文
2015/04/14 职场文书
信仰观后感
2015/06/03 职场文书
社区干部培训心得体会
2016/01/06 职场文书
Mysql中常用的join连接方式
2022/05/11 MySQL