一个简单的遮罩层效果

代码 
<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>
posted @ 2010-04-10 16:14  poisson_notes  阅读(877)  评论(0)    收藏  举报