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


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 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
Js四则运算函数代码
Jul 21 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
node express使用HTML模板的方法示例
Aug 22 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
PHP和XSS跨站攻击的防范
2007/04/17 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
react 父子组件之间通讯props
2018/09/08 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Django-imagekit的使用详解
2020/07/06 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
sort命令的作用和用法
2013/08/25 面试题
init进程的作用
2015/08/20 面试题
晚宴邀请函范文
2014/01/15 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
工作证明书
2015/06/15 职场文书
MySQL开启事务的方式
2021/06/26 MySQL