lock锁屏

最新推荐文章于 2025-06-29 09:11:31 发布

最新推荐文章于 2025-06-29 09:11:31 发布 · 89 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的网页锁定屏幕效果的方法。通过创建一个全屏的半透明灰色背景层并调整其透明度来达到锁定效果。此外，还详细展示了如何根据浏览器窗口尺寸动态调整背景层的大小。

</head>

var sWidth,sHeight;
sWidth=document.body.offsetWidth;//浏览器工作区域内页面宽度
sHeight=document.body.offsetHeight;//屏幕高度（垂直分辨率）

//背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）
var bgObj=document.createElement("div");//创建一个div对象（背景层）
//定义div属性，即相当于
//<div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha

(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div>
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);//在body内添加该div对象
}
</script>
</body>
</html>