<html>
<head>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
</style>
<script type="text/javascript" >
var index = 0;
function blockDiv(){
try
{
if(index>=80)
{
//alert(document.body.clientHeight);
return;
}
else
{
document.getElementById("a").style.display="block";
document.getElementById("a").style.filter =
"progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+index+")"
index= index+10;
//var self = this;
window.setTimeout(blockDiv,10)
}
}
catch(e)
{}
}
function hiddenDiv()
{
try
{
if(index<=0){document.getElementById("a").style.display="none"; return;}
else
{
document.getElementById("a").style.filter =
"progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+index+")"
index= index-10;
//var self = this;
window.setTimeout(hiddenDiv,10)
}
}
catch(e)
{}
}
</script>
</head>
<body>
<div style="background-color:red;border:1px black solid">
一个简单的遮罩层效果<br>
一个简单的遮罩层效果<br>
一个简单的遮罩层效果<br>
一个简单的遮罩层效果<br>
一个简单的遮罩层效果<br>
</div>
<input type="button" value="特效" onclick="blockDiv()">
<div id="a" style="background-image:none; z-index: 11000; position: absolute; filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=0); PADDING-BOTTOM: 0px; border-right-width: 0px;
background-color: black; margin: 0px; padding-left: 0px; width: 100%; padding-right: 0px; border-top-
width: 0px; border-bottom-width: 0px; height: 100%; border-left-width: 0px; top: 0px; padding-top: 0px;
left: 0px;display:none">
<table width="100%" height="100%"><tr><td align="center">
<div style="width:200px;height:100px;background-color:white">
<table width="100%">
<tr>
<td align="left" onclick="hiddenDiv()">
<script>
document.write("网页可见区高度:"+document.body.clientHeight+"px;<br>")
document.write("网页可见区宽度:"+document.body.clientWidth+"px;<br>");
document.write("网页正文全文宽:"+document.body.scrollHeight+"px;<br>");
</script>
</td>
</tr>
</table>
</div>
</td></tr></table>
</div>
<!--<div style="background-image: none; z-index: 11001; position: absolute; padding-bottom: 0px; border
-right-width: 0px; background-color: transparent; margin: 0px; padding-left: 0px; padding-right: 0px;
border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; top: 0px; padding-top: 0px;
left: 0px; height:100%; width:100%;text-align:center; padding-top:20%">asdfsdf</div>-->
<!--
<table width="100%" height="100%" style="position: absolute;" align="center">
<tr align="center">
<td>aaa</td>
</tr>
</table>
-->
</body>
</html>
相关文章：