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


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自定义的函数
Aug 05 Javascript
又一个图片自动缩小的JS代码
Mar 10 Javascript
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
小程序实现列表删除功能
Oct 30 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
vue实现给div绑定keyup的enter事件
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 获取远程网页内容的函数
2009/09/08 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
Python中字符串的格式化方法小结
2016/05/03 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
服装设计专业毕业生求职信
2014/04/09 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
《给予树》教学反思
2016/03/03 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
德生2P3收音机开箱评测
2022/04/30 无线电