lightbox源码解析
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset; //NS
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array(”,yScroll)
return arrayPageScroll;
}
1. self
打开任何一个网页，浏览器会首先创建一个窗口，这个窗口就是一 个window 对象，也是 js 运行所依附的全局环境对象和全局作用域对象。
self 指窗口本身，它返回的对象 跟window 对象是一模一样的。也正因为如此，window 对象的常用方法和函数都可以用 self 代替 window。
2. 获得窗口的滚动偏移量
* OmniWeb 4.2-, NetFront 3.3- 下无法获得.
* Safari 和 OmniWeb 4.5+ 有 bug，但无影响.
有三种方法获取滚动条的位置。
1. window.pageXOffset/pageYOffset 大多数浏览器，非常可靠
2. document.documentElement.scrollLeft/Top Strict 模式下的 IE6 和其它很少一些浏览器
3. document.body.scrollLeft/Top IE6 和 其它一些浏览器
浏览器在支持 document.body 或者 document.documentElement 的情况下，如果提供了 scrollLeft/Top，那么除了 Safari 和 OmniWeb 4.5+ 外, 这些值都是
很可靠的。在 Safari and OmniWeb 4.5+ 中，当滚动条偏移量为 0 时，会返回 -8，其它情况下正常。当然了，因为它们提供了正确的 window.pageXOffset/pageYOffset,
这个 bug 不会造成什么影响。
function getPageSize(){
//整个页面的大小
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac…would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
//可见窗口(view port)的大小
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
文档加载完之前是无法获取窗口大小值的，而且还要对不同浏览器使用不同的方法。可用参数如下：
1. window.innerHeight/Width IE 除外的大多数浏览器
2. document.body.clientHeight/Width 包括 IE 在内的大多数浏览器
3. document.documentElement.clientHeight/Width 包括 IE 在内的大多 DOM 浏览器
关于 clientHeight/Width 会有点乱，因为在不同浏览器下，甚至在同一个浏览器下 clientHeight/Width 都可能不同，要看文档类型激发的是浏览器的
strict 模式还是 quirks 模式。有时，它们指的是窗口的尺寸，有时是文档内容的尺寸。下表展示了不同浏览器、不同模式中的属性：
| Browser | window. innerHeight | document. body. clientHeight | document. documentElement. clientHeight |
|---|---|---|---|
| Opera 9.5+ strict | window | document | window |
| Opera 9.5+ quirks | window | window | document |
| Opera 7-9.2 | window | window | document |
| Opera 6 | window | window | N/A |
| Mozilla strict | window | document | window |
| Mozilla quirks | window | window | document |
| KHTML | window | document | document |
| Safari | window | document | document |
| iCab 3 | window | document | document |
| iCab 2 | window | window | N/A |
| IE 6+ strict | N/A | document | window |
| IE 5-7 quirks | N/A | window | 0 |
| IE 4 | N/A | window | N/A |
| ICEbrowser | window | window | document |
| Tkhtml Hv3 | window | window | document |
| Netscape 4 | window | N/A | N/A |
如上所示，好歹还是有个值是确定的：innerHeight，不过 IE 却不支持这个属性。目前，几乎所有的浏览器都支持使用 window.innerHeight/Width 属性。
算法逻辑：
1. 如果存在 window.innerHeight/Width 属性, 是可以完全信赖的, 使用 window.innerHeight/Width 就可以了.
2. 否则如果存在 document.documentElement.clientHeight/Width 属性且值大于 0，就用 document.documentElement.clientHeight/Width.
3. 否则就用 document.body.clientHeight/Width.
此算法在 IE6+ “standards compliant mode” 下，当窗口所谓 0px × 0px 大小时，失效。
{
// prep objects
var objOverlay = document.getElementById(‘overlay’);
// overlay 为遮罩层
var objLightbox = document.getElementById(‘lightbox’);
var objCaption = document.getElementById(‘lightboxCaption’);
var objImage = document.getElementById(‘lightboxImage’);
var objLoadingImage = document.getElementById(‘loadingImage’);
// 加载图片
var objLightboxDetails = document.getElementById(‘lightboxDetails’);
var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();
// center loadingImage if it exists
if (objLoadingImage) {
// arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] – 35 – objLoadingImage.height) / 2) + ‘px’);
// top = 滚动条位置 ＋ [视口高度 － 35px(浏览器状态栏高度) - 加载图片的高度]/2
objLoadingImage.style.left = (((arrayPageSize[0] – 20 – objLoadingImage.width) / 2) + ‘px’);
objLoadingImage.style.display = ‘block’;
// 设置加载图片在页面中间，浏览器状态栏高度约为 35px，滚动条栏宽度约为 20px。
}
// set height of Overlay to take up whole page and show
// 设置遮罩层高度
objOverlay.style.height = (arrayPageSize[1] + ‘px’);
objOverlay.style.display = ‘block’;
// preload image
imgPreload = new Image();
imgPreload.onload=function(){
objImage.src = objLink.href;
// center lightbox and make sure that the top and left values are not negative
// and the image placed outside the viewport
var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] – 35 – imgPreload.height) / 2);
var lightboxLeft = ((arrayPageSize[0] – 20 – imgPreload.width) / 2);
objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";
objLightboxDetails.style.width = imgPreload.width + ‘px’;
if(objLink.getAttribute(‘title’)){
objCaption.style.display = ‘block’;
objCaption.innerHTML = objLink.getAttribute(‘title’);
} else {
objCaption.style.display = ‘none’;
}
// A small pause between the image loading and displaying is required with IE,
// this prevents the previous image displaying for a short burst causing flicker.
if (navigator.appVersion.indexOf(“MSIE”)!=-1){
pause(250);
}
if (objLoadingImage) { objLoadingImage.style.display = ‘none’; }
// 隐藏加载图
// Hide select boxes as they will ‘peek’ through the image in IE
selects = document.getElementsByTagName(“select”);
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = “hidden”;
}
objLightbox.style.display = ‘block’;
// After image is loaded, update the overlay height as the new image might have
// increased the overall page height.
arrayPageSize = getPageSize();
objOverlay.style.height = (arrayPageSize[1] + ‘px’);
// Check for ‘x’ keypress
listenKey();
return false;
}
imgPreload.src = objLink.href;
}
