JavaScript实现全屏透明遮罩层的锁屏特效

117 浏览量更新于2024-08-30 收藏 62KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

本文档主要介绍了如何使用JavaScript实现一个全屏透明遮罩div层来模拟锁屏效果。在HTML文档结构中，首先定义了一个名为`<title>`的元素，用于设置页面标题，标题内容为"js全屏透明遮罩锁屏效果"，表明该页面的核心功能是利用JavaScript技术来创建一个视觉上的锁定屏幕体验。在 `<head>` 标签内部，添加了一个CSS样式部分，这部分主要用于设定遮罩层的基本属性。创建了一个id为`pageOverlay`的div元素，设置了其`visibility`为`hidden`以使其在初始状态下不可见，然后通过`position: fixed`将其定位为固定在浏览器窗口的顶部和左侧，确保它始终覆盖在页面内容之上。`z-index: 1987`赋予了它较高的层级，以便在其他元素之上显示。背景色设为半透明黑色（#000），通过`filter: alpha(opacity=70)`和`opacity: 0.7`控制透明度，使用户感知到遮罩的存在但不会影响页面内容。为了兼容老版本的IE浏览器（尤其是IE6），在CSS中使用了条件注释来处理`position: fixed`在IE6中的兼容性问题。通过`*html`和`*html body`选择器，将页面背景设置为固定，并调整`#pageOverlay`的`position`属性，使其跟随浏览器窗口的滚动而动态变化。接下来，JavaScript代码作为一个立即执行的函数开始。这里使用了jQuery库（虽然文档中没有明确提及，但通常JavaScript代码会依赖于jQuery来简化DOM操作）。`$`函数是一个简化的版本，用于获取HTML元素，`each`函数则用于遍历元素集合。整个代码的核心思想是创建一个可动态调整位置的全屏透明遮罩，当需要临时隐藏或锁定页面时，可以触发这个遮罩的显示，从而模拟出一种临时的锁定状态。这种技术常用于网站的暂时退出或隐私保护场景，让用户在离开电脑或进行敏感操作时提供一个视觉上的保护，同时保持页面的可用性。在实际应用中，开发者可以根据需要自定义遮罩的动画、事件处理等细节。

资源详情

资源推荐

基于基于JavaScript实现全屏透明遮罩实现全屏透明遮罩div层锁屏效果层锁屏效果

废话不多说了，直接给大家写js代码了，代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>js全屏透明遮罩锁屏效果</title>

#pageOverlay{visibility:hidden;position:fixed;top:0;left:0;z-index:1987;width:100%;height:100%;background:#000;filter:alpha(opacity=70);opacity:0.7;}

/*IE6 fixed*/

* html{background:url(*) fixed;}

* html body{margin:0;height:100%;}

* html #pageOverlay{position:absolute;left:expression(documentElement.scrollLeft+documentElement.clientWidth-

this.offsetWidth);top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);}

</style>

(function(){

// 获取对象

var $ = function (id){

return document.getElementById(id);

};

// 遍历

var each = function(a, b) {

for (var i = 0, len = a.length; i < len; i++) b(a[i], i);

};

// 事件绑定

var bind = function (obj, type, fn) {

if (obj.attachEvent) {

obj['e' + type + fn] = fn;

obj[type + fn] = function(){obj['e' + type + fn](window.event);}

obj.attachEvent('on' + type, obj[type + fn]);

} else {

obj.addEventListener(type, fn, false);

};

// 移除事件

var unbind = function (obj, type, fn) {

if (obj.detachEvent) {

try {

obj.detachEvent('on' + type, obj[type + fn]);

obj[type + fn] = null;

} catch(_) {};

} else {

obj.removeEventListener(type, fn, false);

};

// 阻止浏览器默认行为

var stopDefault = function(e){

e.preventDefault ? e.preventDefault() : e.returnValue = false;

};

// 获取页面滚动条位置

var getPage = function(){

var dd = document.documentElement,

db = document.body;

return {

left: Math.max(dd.scrollLeft, db.scrollLeft),

top: Math.max(dd.scrollTop, db.scrollTop)

};

// 锁屏

var lock = {

show: function(){

$('pageOverlay').style.visibility = 'visible';

var p = getPage(),

left = p.left,

top = p.top;

// 页面鼠标操作限制

this.mouse = function(evt){

var e = evt || window.event;

stopDefault(e);

scroll(left, top);

};

each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {

bind(document, o, lock.mouse);

});

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38734269

粉丝: 3
资源: 930

JavaScript实现全屏透明遮罩层的锁屏特效

鼠标悬停弹出js窗体例子

js点击按钮实现带遮罩层的弹出视频效果

点击图片出现放大遮罩层

div半透明遮罩效果

jquery弹出div遮罩层

html半透明遮罩效果

taro 小程序 全屏遮罩层怎么做

使用js实现带透明遮罩的加载动画

前端实现半透明遮罩遮住图片一半

CSS 半透明遮罩层

在按钮上遮罩一层div并阻止按钮被触发 用css能否实现

假设当我点击一个div时，会弹出一个全屏的遮罩层，里面内容显示四张图片，当我点击内容以外的区域，关闭遮罩层，请用jq方法实现并且给出完整的代码

遮罩html全屏,怎样使遮罩层铺满全屏，尝试过，成功

怎么给html底部加个遮罩,div+css实现图片底部透明遮罩文字标题

jquery实现全屏遮罩弹窗，要求弹窗在移动端中心

用jQuery写一个关于鼠标移动到图片上，形成图片半透明遮罩层

css 遮罩层 半透明

unity 3d模型半透明遮罩

js事情绑定 鼠标悬浮出现遮罩层，鼠标离开遮罩层收起

css半透明遮罩层文字

最新资源

taro 小程序全屏遮罩层怎么做

在按钮上遮罩一层div并阻止按钮被触发用css能否实现

css 遮罩层半透明

js事情绑定鼠标悬浮出现遮罩层，鼠标离开遮罩层收起