Lightbox源码解析[二]

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;

}

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

如上所示，好歹还是有个值是确定的：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 大小时，失效。

附图一张：


Reference：http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

周杰伦 － 三十而立

专辑中文名: 三十而立
歌手: 周杰伦
音乐风格: 流行
资源格式: MP3
发行时间: 2009年06月02日
地区: 大陆
语言: 普通话

专辑介绍：

三十而立，立身扬名。30岁的杰伦已全方位进入了娱乐圈，在其而立之年推出的这套成名作珍藏版，包含了杰伦出道初期最为经典的创作。让我们回味原汁原味的”周杰伦音乐风”，感受最为纯正的周杰伦。

专辑曲目:

【CD 1】

01.半兽人
02.半岛铁盒
03.暗号
04.龙拳
05.火车叨位去
06.分裂 (离开)
07.爷爷泡的茶
08.回到过去
09.米兰的小铁匠
10.最后的战役

【CD 2】

01.爱在西元前
02.爸我回来了
03.简单爱
04.忍者
05.开不了口
06.上海一九四三
07.对不起
08.威廉古堡
09.双截棍
10.安静
11.蜗牛
12.你比从前快乐
13.世界末日

【CD 3】

01.Opening 双截棍 (变奏版)
02.忍者
03.爷爷泡的茶
04.暗号
05.爱在西元前
06.半岛铁盒
07.回到过去
08.斗牛
09.分裂
10.安静
11.黑色幽默

【CD 4】

01.找自己
02.龙捲风
03.星晴
04.龙拳
05.上海一九四三
06.你怎么连话都说不清楚
07.最后的战役
08.简单爱
09.开不了口

请至此处下载 http://www.verycd.com/topics/2756074/

//之前是开着玩笑说“奔三”了，现在是真的要“奔三”了
//确还在挣扎着生存
//。。。

//最近受 twitter 所累，极少更新本blog，可 follow me
//注意：大陆用户不能直达，请自行转机到达

Farewell, King of Pop

嗯，隔了这么久，还是来纪念下吧

其实对于 MJ 来说，这该算是解脱吧。

也许多年之后，关于 MJ 的种种传言会水落石出，也许依然是流言满天

这时候，还有什么可以信得坚定不移呢

不过 MJ 的音乐成就是绝对真实的

King of pop, farewell…