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


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 相关文章推荐
常用的javascript function代码
May 23 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
es6函数中的作用域实例分析
Apr 18 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
python读取Android permission文件
2013/11/01 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
RetroStage德国:复古服装
2019/02/03 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
运动会邀请函范文
2014/02/06 职场文书
婚礼司仪主持词
2014/03/14 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
离职报告范文
2014/11/04 职场文书
离婚起诉书范本
2015/05/18 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
领导干部学习心得体会
2016/01/23 职场文书
爱国之歌(8首)
2019/09/29 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
如何解决php-fpm启动不了问题
2021/11/17 PHP
mysql查找连续出现n次以上的数字
2022/05/11 MySQL
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers