基于基于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);
});
评论0