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


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 cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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
PHP4实际应用经验篇(2)
2006/10/09 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
php读取mysql的简单实例
2014/01/15 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
python读取excel表格生成erlang数据
2017/08/26 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
OpenCV 模板匹配
2019/07/10 Python
pywinauto自动化操作记事本
2019/08/26 Python
python语言中有算法吗
2020/06/16 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
英语教学随笔感言
2014/02/20 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
法语专业求职信
2014/07/20 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL