背景遮罩效果 javascript

最新推荐文章于 2024-09-25 14:00:00 发布

daniao2003

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript xhtml html button function div

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JAVASCRIPT背景遮罩</title>
<script language="Javascript" type="Text/javascript">

var INTERIM = 30;
function shade(objId,opacityValue)
{
    opacityValue = opacityValue > 10 ? 10 : opacityValue;

    var currentObj = document.getElementById(objId);
    currentObj.style.left = "0px";
    currentObj.style.top = "0px";
    currentObj.style.zIndex = "100";

    // 此注释部分脚本在 IE 6 中有问题,以更改为下面的方式实现
    //currentObj.style.width = "100%";
    //currentObj.style.height = "100%";

    currentObj.style.width = document.documentElement.clientWidth + "px";
    currentObj.style.height = document.documentElement.clientHeight + "px";

    currentObj.style.position = "absolute";
    currentObj.style.backgroundColor = "#ffffff";


    if (currentObj.style.display == 'none')
    {
        currentObj.style.opacity = '0';
        currentObj.style.filter = 'alpha(opacity=0)';
        currentObj.style.display = 'block';
        for (var i = 0; i <= opacityValue; i++)
        {
            setTimeout('document.getElementById(/'' + objId + '/').style.opacity = '+ i +';', i * INTERIM);
            setTimeout('document.getElementById(/'' + objId + '/').style.filter = "alpha(opacity='+ (i * 10) +')";', i * INTERIM);
        }
    }
    else
    {
        var opacity = parseInt(currentObj.style.opacity);
        var currentOpacity = opacity;
        for (var i = 0;i <= opacity; i++)
        {
            currentOpacity = opacity - i;
            setTimeout('document.getElementById(/'' + objId +'/').style.opacity = '+ currentOpacity +';', i * INTERIM);
            setTimeout('document.getElementById(/'' + objId + '/').style.filter = "alpha(opacity='+ (currentOpacity * 10) +')";', i * INTERIM);
        }

        setTimeout('document.getElementById(/'' + objId + '/').style.display = "none";', i * INTERIM);

    }
}
</script>
</head>
<body >
<div id="pagePanel" style="display:none" οnclick="shade('pagePanel',6)"></div>
<input type="button" οnclick="shade('PagePanel',6)" value="Click" />
<div id="content" style="font-size: x-large; font-family: 微软雅黑, Verdana; text-align:center;background-color:Gray;" >
Hi.Welcome <a href="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa>
Hi.Welcome <a href="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa>
Hi.Welcome <a href="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa>
Hi.Welcome <a href="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa>
Hi.Welcome <a href="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa>
Hi.Welcome <a href="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa>
</div>
</body>
</html>