实现局部遮罩与关闭原理及代码
实现局部遮罩与关闭原理及代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下://实现局部遮罩functionShade(){vars=document.getElementById("shade")...

复制代码 代码如下:

//实现局部遮罩

<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教程学习
编程开发子分类