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

复制代码 代码如下:

  //实现局部遮罩

  <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>