DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS教程:lightbox源碼解析
JS教程:lightbox源碼解析
編輯:關於JavaScript     

網頁制作poluoluo文章簡介: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 模式。有時,它們指的是窗口的尺寸,有時是文檔內容的尺寸。下表展示了不同浏覽器、不同模式中的屬性:

Properties and what they relate to 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 大小時,失效。

網頁制作poluoluo文章簡介: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;

}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved