在上一篇博文 中主要对几种获取网页大小（宽度、高度）的属性进行了描述，结合上一篇的成果，在此篇文章中，利用几种属性，对网页上的一些常用功能(比如大小、位置)进行实现：（在Windows7 下的IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1测试通过）
本文地址：http://www.cnblogs.com/vnii/archive/2012/01/17/2323632.html
//网页大小，宽度和高度，中心点,当前屏幕左上角右下角相对位置
var webPage = (function () {
var b = document.body;
var e = document.documentElement;
return {
//当前网页的总大小
size: function () {
//结合上一篇博文中scrollXxx等几种属性的描述
var w = Math.max(b.scrollWidth, b.offsetWidth, e.scrollWidth);
var h = Math.max(b.scrollHeight, b.offsetHeight, e.scrollHeight);
return { "width": w * 1, "height": h * 1 };
},
//当前视窗的屏幕中心位置
center: function (pos) {//pos偏移{left:value,top:value}
//当前视窗中心点位置相对网页左上角的像素位置＝当前视窗大小/2 + 滚动条偏移值
var lt = this.leftTop();
var x = e.clientWidth / 2 + lt.x;
var y = e.clientHeight / 2 + lt.y;
if (pos) {
if (pos.left * 1) {
x = x + pos.left * 1;
}
if (pos.top * 1) {
y = y + pos.top * 1;
}
}
return { "x": x, "y": y };
},
//当前视窗左上角相对当前网页左上角的像素位置＝＝滚动条偏移量
leftTop: function () {
//e.scrollLeft：IE下为偏移值，其它为0 ，b.scrollLeft:IE为0,Chrome等为偏移值
return { "x": (b.scrollLeft + e.scrollLeft) * 1, "y": (b.scrollTop + e.scrollTop) * 1 };
},
//当前视窗右下角相对当前网页左上角的像素位置＝＝当前视窗大小+滚动条偏移量
rightBottom: function () {
var lt = this.leftTop();
return { "x": e.clientWidth + lt.x, "y": e.clientHeight + lt.y };
}
}
} ());
利用上面方法，实现一个网页蒙版，并且在网页当前视窗中心位置始终悬浮一个div
//按参数要求创建一个div到网页，参数s={"width":容器宽度,"height":容器高度,"color":"颜色","x":左上角位置,"y":左上角位置,"z":层位置};
function createDiv(s) {
var d = document.createElement("div");
d.setAttribute("style", "filter:alpha(Opacity=80);-moz-opacity:0.2;opacity:0.2;z-index:" + parseInt(1 + s.z));
d.style.position = "absolute";
d.style.margin = "0px";
d.style.backgroundColor = s.color;
d.style.left = s.x + "px";
d.style.top = s.y + "px";
d.style.width = s.width + "px";
d.style.height = s.height + "px";
document.body.appendChild(d);
return d;
}
var centerDiv; //全局变量，用于记录存放视窗中心位置的div
var myWidth = 100;//放置div的宽度
var myHeight = 100;//高度
window.onload = function () {
//网页size
var q1 = webPage.size();
//当前视窗中心点在加上偏移量后的位置点
var q2 = webPage.center({ left: -myWidth / 2, top: -myHeight / 2 });
//整个网页覆盖蒙版div
createDiv({ "width": q1.width, "height": q1.height, "color": "#ff0000", "x": 0, "y": 0, "z": 99 });
//指定视窗某位置创建一个div
centerDiv = createDiv({ "width": myWidth, "height": myHeight, "color": "#000000", "x": q2.x, "y": q2.y, "z": 999 });
}
//浏览器大小变化或者滚动条偏移时 重新修改指定div的位置，保持在视窗中的位置相对不变
window.onscroll = window.onresize = function () {
var q2 = webPage.center({ left: -myWidth / 2, top: -myHeight / 2 });
if (centerDiv) {
centerDiv.style.top = q2.y + "px";
centerDiv.style.left = q2.x + "px";
}
}
效果：
