代码
<
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 >
< 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="关闭" οnclick="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="特效" οnclick="blockDiv()">
</DIV>
</body>
</html>
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
