基于JavaScript实现全屏透明遮罩div层锁屏效果资源-CSDN文库

172 浏览量 2020-11-22 08:25:59 上传评论收藏 62KB PDF 举报

废话不多说了，直接给大家写js代码了，代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js全屏透明遮罩锁屏效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!- 在本文中，我们将深入探讨如何使用JavaScript实现全屏透明遮罩div层的锁屏效果。我们需要了解几个关键的概念和技术： 1. **全屏遮罩**：在网页上创建一个覆盖整个屏幕的div元素，通常用于显示弹出窗口、加载动画或暂停用户交互时。在这个例子中，我们使用一个id为`pageOverlay`的div，设置其样式为全屏且具有70%的透明度。 ```css #pageOverlay { visibility: hidden; position: fixed; top: 0; left: 0; z-index: 1987; /* 确保遮罩层位于其他元素之上 */ width: 100%; height: 100%; background: #000; filter: alpha(opacity=70); /* IE6 的透明效果 */ opacity: 0.7; /* 其他浏览器的透明效果 */ } ``` 2. **CSS Hack**：由于不同的浏览器对CSS支持不一，代码中使用了一些特定的浏览器 hack，如`* html`和`* html body`，来解决IE6中的`position: fixed`问题。这些hack确保了在旧版本的IE浏览器中也能正确显示全屏遮罩。 3. **JavaScript函数和事件处理**： - `each` 函数遍历数组或类数组对象，执行提供的回调函数。 - `bind` 函数用于将函数绑定到特定的对象，以便在事件触发时，函数可以正确访问上下文。 - `unbind` 函数用于移除之前通过`bind`添加的事件监听器。 - `stopDefault` 函数阻止浏览器的默认行为，如链接的跳转或表单的提交。 - `getPage` 函数获取当前页面的滚动条位置。 4. **锁屏逻辑**：`lock.show`方法展示了锁屏效果。将`pageOverlay`的`visibility`设置为`visible`，然后计算页面滚动条的位置，并监听鼠标和键盘事件，阻止任何可能的页面滚动和点击操作。 ```javascript var lock = { show: function() { $('pageOverlay').style.visibility = 'visible'; // ... // 页面鼠标操作限制 this.mouse = function(evt) { var e = evt || window.event; stopDefault(e); scroll... }; // 绑定事件 bind(document, 'mousemove', this.mouse); bind(document, 'keydown', this.keydown); }, keydown: function(e) {/* ... */}, hide: function() {/* ... */} }; ``` 5. **解除锁屏**：当不再需要锁屏效果时，可以通过调用`lock.hide`方法移除事件监听器并隐藏`pageOverlay`。 ```javascript lock.hide = function() { unbind(document, 'mousemove', this.mouse); unbind(document, 'keydown', this.keydown); $('pageOverlay').style.visibility = 'hidden'; }; ``` 总结来说，这个示例展示了如何利用JavaScript和CSS创建一个全屏透明遮罩的锁屏效果，适用于在网页中暂时禁用用户交互或显示重要提示。在实际应用中，你可能需要根据项目需求调整代码，例如添加动画效果、自定义事件触发锁屏和解锁，或者处理更多浏览器兼容性问题。

资源详情

资源评论

资源推荐

基于基于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实现全屏透明遮罩div层锁屏效果

评论0

最新资源

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

评论0

实现全屏遮罩的screen.js文件

DIV遮罩层如何实现

js 页面全部遮罩层

使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享

Jquery实现网页锁屏（DIV遮罩）

JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

鼠标悬停弹出js窗体例子

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

点击图片出现放大遮罩层

Javascript实现弹出DIV层并锁屏

实现div 遮罩 frameset

javascript弹出层并锁屏

用Jquery实现DIV锁屏并且可以拖拽DIV窗体代码页面

第34章 项目1-博客前端：封装库--遮罩锁屏1

js+css点击弹出遮罩层图片放大展示demo

JS遮罩层完美弹出Div(滚动条不可动)

JS弹窗带有背景颜色会渐变效果遮罩住背景

js 日历控件 (iframe层,可遮盖select,相当不错)

13种html5+css3全屏遮罩效果导航菜单

js写一个弹出层并锁屏效果实现代码

可拖动div弹窗

JS实现的添加弹出层并完成锁屏操作示例

并行程序设计导论课后答案_2.7z

加速度积分求速度和位移的c语言算法程序

数据结构课设用C、C++写旅游区景点导游系统头文件(用文件存储，DFS，DIJ算法），完全免费！没有要积分，能多给我点点赞吗？

DeepLearning之LSTM模型输入参数：time_step, input_size, batch_size的理解

Vulkan编程指南.pdf

python自动化办公——python操作Excel、Word、PDF集合大全

最新资源

第34章项目1-博客前端：封装库--遮罩锁屏1