js实现局部遮罩与关闭的代码

发布时间:2020-03-17编辑:脚本学堂
js实现局部遮罩与关闭的代码

js实现局部遮罩与关闭的代码,学习遮罩的小例子。

复制代码 代码如下:
//实现局部遮罩
 <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>