<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>
浙公网安备 33010602011771号