基于基于JavaScript实现全屏透明遮罩实现全屏透明遮罩div层锁屏效果层锁屏效果
废话不多说了，直接给大家写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">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
#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>
<script language="javascript">
(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);
});
weixin_38734269
- 粉丝: 3
- 资源: 930
最新资源
- SimpleComTools开发的TCP Test Tool和UDP Test Tool
- PLC小车自动控制往返系统设计与仿真 《可编程控制器原理与应用》综合设计性实验 s7-1200系列，博途V15 基于博途平台小车自动往返控制系统的设计与仿真，包括硬件组态、变量定义、PLC程序设计
- 企业管理-OKR计划表
- Jmeter-01、08
- 改进二进制粒子群算法配电网重构 可以动态生成配电网重构过程，目标函数为功率损耗，算例为IEEE33节点系统 程序简洁明了，注释详细
- 多智能体、一致性、时滞 含通信时滞和输入时滞的多智能体一致性仿真 简单的多智能体一致性性仿真图，包含状态轨迹图和控制输入图 适用于初学者
- 齿轮、行星齿轮、端面齿轮、斜齿轮、非圆齿轮、圆弧齿轮……啮合理论、啮合原理、齿面求解、传动特性、接触分析tca、传动误差等技术matlab程序实现 参照李特文《齿轮几何学与啮合理论》
- 直流无刷电机模型+三闭环-simulink
- Java毕设项目：基于spring+mybatis+maven+mysql实现的养老院老人健康监护平台【含源码+数据库+开题报告+任务书+毕业论文】
- 51单片机开发的光照强度检测程序源码，用滑动变阻器分压代替采集电压信号光敏电阻， 包括程序源码和原理图和protues仿真， 程序源码注释详细，非常适合单片机开发人员，
- 1.Python简介.ipynb
- 基于simulink的永磁同步电机DTC控制系统仿真 基于模糊控制的pmsm的DTC控制系统仿真
- Java毕设项目：基于spring+mybatis+maven+mysql实现的农家乐系统分前后台【含源码+数据库+毕业论文】
- 双向LLC比较新的拓扑结构，双变压器，CDT-LC双向直流变器 只有开环仿真，可实现软开关 送对应参考文县
- Java毕设项目：基于spring+mybatis+maven+mysql实现的药品管理系统【含源码+数据库+毕业论文】
- 光伏发电并网逆变simulink matlab仿真 两级三相 单相系统 前级采用boost升压斩波电路 mppt最大功率点跟踪采用扰动观察法 可接单相或者三相并网逆变
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0