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


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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 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执行速度全攻略(上)
2006/10/09 PHP
PHP中for循环语句的几种变型
2006/11/26 PHP
php图片添加水印例子
2016/07/20 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
理解javascript async的用法
2017/08/22 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python定时器实例代码
2017/11/01 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
Python实战之制作天气查询软件
2019/05/14 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
小学毕业感言150字
2014/02/05 职场文书
学校运动会霸气口号
2014/06/07 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js