网页中层的遮罩效果原理。

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30609287

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wjshan0808/p/3551012.html

<body>
    <div style="">
        <input id="Text1" type="text" style="width: 400px" value="哈哈，只是简单的原理（代码可能不是这样写的），明白原理就好～" />
        <br />
        <br />
    </div>
</body>
</html>
<script type="text/javascript">
    var CDestroy = function () {
        var chi = document.getElementById('ShadeDIV');
        chis = document.getElementById('UpShadeDIV');
        document.body.removeChild(chi);
        document.body.removeChild(chis);
    };
    var DemoShade = function () {
        //获取window宽高。
        var iHeight = window.innerHeight / 6,//588
            iWidth = window.innerWidth / 6;//814
        //alert(iHeight); alert(iWidth);//浏览器当前空白区域的高,宽

        //var oHeight = window.outerHeight,//689
        //    oWidth = window.outerWidth;//814
        //alert(oHeight); alert(oWidth); //整个浏览器高, 宽

        //var sLeft = window.screenLeft,//69
        //    sTop = window.screenTop;//38
        //alert(sLeft); alert(sTop);// 浏览器相对屏幕左右

        //var sX = window.screenX,//69
        //    sY = window.screenY;//38
        //alert(sX); alert(sY);// 浏览器相对屏幕上下

        //var sH = window.screen.height,//768
        //    sW = window.screen.width;//1366
        //alert(sH); alert(sW);//屏幕高（分辨率）

        //var bcH = document.body.clientHeight,//106
        //    bcW = document.body.clientWidth;//798
        //alert(bcH); alert(bcW);//body的高，宽

        //var bcL = document.body.clientLeft,//0
        //    bcT = document.body.clientTop;//0
        //alert(bcL); alert(bcT);//

        //var boH = document.body.offsetHeight,//106
        //    boW = document.body.offsetWidth;//798
        //alert(boH); alert(boW);//

        //var boL = document.body.offsetLeft,//0
        //    boT = document.body.offsetTop;//0
        //alert(boL); alert(boT);//.

        //var bsL = document.body.scrollLeft,//0
        //    bsT = document.body.scrollTop;//0
        //alert(bsL);alert(bsT);//scollbar掩埋的宽高
        var bsH = document.body.scrollHeight,//588
            bsW = document.body.scrollWidth;//814
        zindex = ++document.body.childElementCount;
        //alert(bsH); alert(bsW);//浏览器空白区域（含scrollBar）的高,宽  
        var div = document.createElement('div');//遮罩silverDIV
        div.id = 'ShadeDIV';
        div.style.backgroundColor = 'silver';
        div.style.position = 'absolute';
        div.style.width = bsW + 'px';//这里完美一点可以设置为屏幕的高宽
        div.style.height = bsH + 'px';//或者设置浏览器大小改变事件重新设置
        div.style.top = 0 + 'px';
        div.style.left = 0 + 'px';
        div.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=35,finishOpacity=65)"; //ie浏览器透明度设置
        div.style.opacity = "0.65"; //透明度(火狐浏览器中)
        div.style.zIndex = ++zindex;
        document.body.appendChild(div);

        div = document.createElement('div');//凌驾与遮罩的DIV
        div.style.zIndex = ++zindex;
        div.id = 'UpShadeDIV';
        div.style.position = 'absolute';
        div.style.top = iHeight + 'px';
        div.style.left = iWidth + 'px';
        document.body.appendChild(div);

        var txt = document.createElement('strong');
        txt.innerText = '百度浏览器效果还可以吧';
        div.appendChild(txt);
        var btn = document.createElement('input');
        btn.type = 'button';
        btn.value = 'X';
        btn.align = 'right';
        btn.onclick = CDestroy;
        div.appendChild(btn);

    };
    window.onload = function () {
        var btn = document.createElement('input');
        btn.value = '显示层的遮罩效果';
        btn.type = 'button';
        btn.onclick = DemoShade;
        document.body.appendChild(btn);
    };
</script>