全屏的div,该怎么处理
日期：2014-05-16 浏览次数：20410 次
全屏的div
找了好多的网站的全屏例子，但在ie中好像都有问题，firefox没有试过
当窗口放大或者缩小时，右边及下面就没有div遮住了。
如何解决？我试了window.onresize，但不能解决问题
------解决方案--------------------
<!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>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 全屏DIV </title>
<style type= "text/css ">
html, body {
height:100%;
width:100%;
padding:0px;
margin:0px;
}
div.AllWindowDiv {
position:absolute;
z-index:100;
width:100%;
height:100%;
opacity:0.5;
filter:alpha(opacity=50);
background-color:#000000;
}
</style>
<script type= "text/javascript ">
var Class = {
//创建类
create: function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};
var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};
var $ = function (id) {
//获取对象
return document.getElementById(id);
};
Object.extend = function (a, b) {
//追加方法
for (var i in b) a[i] = b[i];
return a;
};
Object.extend(Object, {
addEvent : function (a, b, c, d) {
//添加函数
if (a.attachEvent) a.attachEvent(b[0], c);
else a.addEventListener(b[1] || b[0].replace(/^on/, " "), c, d || false);
return c;
},
delEvent : function (a, b, c, d) {
if (a.detachEvent) a.detachEvent(b[0], c);
else a.removeEventListener(b[1] || b[0].replace(/^on/, " "), c, d || false);
return c;
},
reEvent : function () {
//获取Event
return window.event ? window.event : (function (o) {
do {
o = o.caller;
} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));
return o.arguments[0];
})(this.reEvent);
}
});
Function.prototype.bind = function () {
//绑定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};
var ScreenDiv = Class.create();
ScreenDiv.prototype = {
initialize : function () {
var wc = this, div = wc.div;
div.setAttribute(/MSIE/.test(window.navigator.userAgent) ? "className " : "class ", "AllWindowDiv ");
div.onclick = wc.clear.bind(wc);
},
div : document.createElement( "div "),
rePosition : function () {
return { x : document.documentElement.scrollLeft, y : document.documentElement.scrollTop };
},
add : function () {
var wc = this, p = wc.rePosition();
with (wc.div.style) {
left = p.x + "px ";
top = p.y + "px ";
}
document.body.appendChild(wc.div);
document.onselectstart = new Function( "return false ");
document.getElementsByTagName( "html ")[0].style.overflow = "hidden ";
window.scrollTo(p.x, p.y);
},
clear : function () {
var wc = this;
document.body.removeChild(wc.div);
document.onselectstart = null;
document.getElementsByTagName( "html ")[0].style.overflow = " ";
}
};
找了好多的网站的全屏例子，但在ie中好像都有问题，firefox没有试过
当窗口放大或者缩小时，右边及下面就没有div遮住了。
如何解决？我试了window.onresize，但不能解决问题
------解决方案--------------------
<!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>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 全屏DIV </title>
<style type= "text/css ">
html, body {
height:100%;
width:100%;
padding:0px;
margin:0px;
}
div.AllWindowDiv {
position:absolute;
z-index:100;
width:100%;
height:100%;
opacity:0.5;
filter:alpha(opacity=50);
background-color:#000000;
}
</style>
<script type= "text/javascript ">
var Class = {
//创建类
create: function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};
var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};
var $ = function (id) {
//获取对象
return document.getElementById(id);
};
Object.extend = function (a, b) {
//追加方法
for (var i in b) a[i] = b[i];
return a;
};
Object.extend(Object, {
addEvent : function (a, b, c, d) {
//添加函数
if (a.attachEvent) a.attachEvent(b[0], c);
else a.addEventListener(b[1] || b[0].replace(/^on/, " "), c, d || false);
return c;
},
delEvent : function (a, b, c, d) {
if (a.detachEvent) a.detachEvent(b[0], c);
else a.removeEventListener(b[1] || b[0].replace(/^on/, " "), c, d || false);
return c;
},
reEvent : function () {
//获取Event
return window.event ? window.event : (function (o) {
do {
o = o.caller;
} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));
return o.arguments[0];
})(this.reEvent);
}
});
Function.prototype.bind = function () {
//绑定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};
var ScreenDiv = Class.create();
ScreenDiv.prototype = {
initialize : function () {
var wc = this, div = wc.div;
div.setAttribute(/MSIE/.test(window.navigator.userAgent) ? "className " : "class ", "AllWindowDiv ");
div.onclick = wc.clear.bind(wc);
},
div : document.createElement( "div "),
rePosition : function () {
return { x : document.documentElement.scrollLeft, y : document.documentElement.scrollTop };
},
add : function () {
var wc = this, p = wc.rePosition();
with (wc.div.style) {
left = p.x + "px ";
top = p.y + "px ";
}
document.body.appendChild(wc.div);
document.onselectstart = new Function( "return false ");
document.getElementsByTagName( "html ")[0].style.overflow = "hidden ";
window.scrollTo(p.x, p.y);
},
clear : function () {
var wc = this;
document.body.removeChild(wc.div);
document.onselectstart = null;
document.getElementsByTagName( "html ")[0].style.overflow = " ";
}
};
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
