JS教程:lightbox源码解析

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 模式。有时，它们指的是窗口的尺寸，有时是文档内容的尺寸。下表展示了不同浏览器、不同模式中的属性：

|||

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 = 滚动条位置 ＋ [视口高度 － 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;

}