网页中层的遮罩效果原理。
<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>