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
打開(kāi)任何一個(gè)網(wǎng)頁(yè)，瀏覽器會(huì)首先創(chuàng)建一個(gè)窗口，這個(gè)窗口就是一 個(gè)window 對(duì)象，也是 js 運(yùn)行所依附的全局環(huán)境對(duì)象和全局作用域?qū)ο蟆?br />self 指窗口本身，它返回的對(duì)象 跟window 對(duì)象是一模一樣的。也正因?yàn)槿绱耍瑆indow 對(duì)象的常用方法和函數(shù)都可以用 self 代替 window。

2. 獲得窗口的滾動(dòng)偏移量
* omniweb 4.2-, netfront 3.3- 下無(wú)法獲得.
* safari 和 omniweb 4.5+ 有 bug，但無(wú)影響.

有三種方法獲取滾動(dòng)條的位置。
1. window.pagexoffset/pageyoffset 大多數(shù)瀏覽器，非常可靠
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+ 中，當(dāng)滾動(dòng)條偏移量為 0 時(shí)，會(huì)返回 -8，其它情況下正常。當(dāng)然了，因?yàn)樗鼈兲峁┝苏_的 window.pagexoffset/pageyoffset,
這個(gè) bug 不會(huì)造成什么影響。

function getpagesize(){

//整個(gè)頁(yè)面的大小
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;
}

//可見(jiàn)窗口(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;
}

文檔加載完之前是無(wú)法獲取窗口大小值的，而且還要對(duì)不同瀏覽器使用不同的方法。可用參數(shù)如下：
1. window.innerheight/width ie 除外的大多數(shù)瀏覽器
2. document.body.clientheight/width 包括 ie 在內(nèi)的大多數(shù)瀏覽器
3. document.documentelement.clientheight/width 包括 ie 在內(nèi)的大多 dom 瀏覽器

關(guān)于 clientheight/width 會(huì)有點(diǎn)亂，因?yàn)樵诓煌瑸g覽器下，甚至在同一個(gè)瀏覽器下 clientheight/width 都可能不同，要看文檔類型激發(fā)的是瀏覽器的
strict 模式還是 quirks 模式。有時(shí)，它們指的是窗口的尺寸，有時(shí)是文檔內(nèi)容的尺寸。下表展示了不同瀏覽器、不同模式中的屬性：

|||

function showlightbox(objlink)
{
// 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 = 滾動(dòng)條位置 ＋ [視口高度 － 35px(瀏覽器狀態(tài)欄高度) - 加載圖片的高度]/2
objloadingimage.style.left = (((arraypagesize[0] - 20 - objloadingimage.width) / 2) + 'px');
objloadingimage.style.display = 'block';
// 設(shè)置加載圖片在頁(yè)面中間，瀏覽器狀態(tài)欄高度約為 35px，滾動(dòng)條欄寬度約為 20px。
}

// set height of overlay to take up whole page and show
// 設(shè)置遮罩層高度
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;

}