一个简单的遮罩层效果
代码 <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>
2010年5月23日改进版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">body{margin:0px;
padding:0px;
}
#a{background-image:none;
z-index: 50;
position: absolute;
opacity:0; /*非IE*/ filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);/*IE*/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;
}
.PopWindowDiv{z-index: 100;
width: 280px;
height: 200px;
position: fixed; /*IE下如果漂浮效果没有实现可能是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 标准没有加上去*/ /*top:0px;*/bottom: 0px;
right:0px;
/*left: 0px;*/border:1px black solid;
background-color:white;
}
#ShowMsg{z-index: 100;
width: 100%;
display:none;
position: fixed; top:200px;
text-align:left;
}
</style>
<script type="text/javascript" >function $$(obj){return typeof(obj)=="string"?document.getElementById(obj):obj; }
var isIE = /*@cc_on!@*/false;
var index = 0;function blockDiv(){ try { if(index>=80) { //alert(document.body.clientHeight); $$("ShowMsg").style.display="block";
return;}
else {$$("a").style.display="block";
//alert(document.body.clientHeight); $$("a").style.height =document.body.clientHeight; //$$("a").style.height ="100%"; //document.body.style.overflow = "hidden"; var opacity = index/100; if(isIE) {$$("a").style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+index+")"
}
else $$("a").style.opacity = opacity ;index= index+10;
//var self = this;window.setTimeout(blockDiv,10)
}
}
catch(e) {}}
function hiddenDiv(){ try { if(index<=0) {document.getElementById("a").style.display="none";
//document.body.style.overflow = "auto";$$("ShowMsg").style.display="none";
return;}
else { var opacity = index/100; if(isIE) {document.getElementById("a").style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+index+")"
}
else document.getElementById("a").style.opacity = opacity ;index= index-10;
//var self = this;window.setTimeout(hiddenDiv,10)
}
}
catch(e) {}}
</script>
</head>
<body>
<div style="background-color:red;border:1px black solid">asdfsadfsdfsdffsdfsdfsdfsdf<br>
asdfsadfsdfsdffsdfsdfsdfsdf<br>
asdfsadfsdfsdffsdfsdfsdfsdf<br>
asdfsadfsdfsdffsdfsdfsdfsdf<br>
asdfsadfsdfsdffsdfsdfsdfsdf<br>
</div>
<script>
for(var i = 0;i <= 40;i++)
document.write("a<br>");</script>
<div id="a"></div><div id="ShowMsg"><table width="100%" height="100%"><tr><td align="center">
<table width="200px" style="background-color:white">
<tr>
<td align="left"><div style="text-align:right"><input type="button" value="关闭" onclick="hiddenDiv()"></div>
<script type="text/javascript">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>
</td></tr></table>
</div>
<DIV class="PopWindowDiv">
<input type="button" value="特效" onclick="blockDiv()">
</DIV>
</body>
</html>
