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


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函数、方法、对象代码
Oct 29 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
php数组去重实例及分析
2013/11/26 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
Python中字符串对齐方法介绍
2015/05/21 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
super关键字的用法
2012/04/10 面试题
中专生的个人自我评价
2013/12/11 职场文书
中国好声音广告词
2014/03/18 职场文书
平面设计专业求职信
2014/08/09 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2014年财务科工作总结
2014/11/11 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python