实现局部遮罩与关闭原理及代码
更新时间:2013年02月04日 09:50:15 作者:
实现局部遮罩,或许对某些朋友有着特殊的意义。局部遮罩的原理很简单另外加上关闭就有着另一番的效果,本文将介绍实现方法,感兴趣的朋友可以了解下,或许对你有所帮助
复制代码 代码如下:
//实现局部遮罩
<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面向对象之共享成员属性与方法及prototype关键字用法
这篇文章主要介绍了javascript面向对象之共享成员属性与方法及prototype关键字用法,实例分析了prototype关键字在共享成员属性与方法中的原理与使用技巧,需要的朋友可以参考下2015-01-01javascript中的parseInt和parseFloat区别
这篇文章用简单的小例子演示了parseInt和parseFloat区别,有需要的朋友可以参考一下2013-07-07
最新评论