其實(shí)這個(gè)應(yīng)該不列入JS教程的范疇。應(yīng)為FF，IE6以上瀏覽器都支持fixed這個(gè)固定屬性。唯獨(dú)IE6不支持。所以我為了可惡的IE6。我這里就出一篇教程吧。而且這種效果也可以鍛煉同學(xué)們的計(jì)算能力。以后很多效果都需要你的計(jì)算能力。哈哈
固定居中。或者固定在任何地方思想幾乎是一樣的。只你要算法清楚了。效果寫起來就輕而易舉了。先貼代碼

var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
這兩句是判斷瀏覽器。這是Aajx里的方法。也很好理解。我在這里就不多說了。大家有興趣的可以去網(wǎng)上找找了解一下判斷各種瀏覽器。

var t= (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop;
var l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft;
這兩句是重點(diǎn)。我要仔細(xì)說下：
document.documentElement.clientHeight這個(gè)是獲取當(dāng)前瀏覽器窗口的高度。
document.getElementById("gd").offsetHeight這是獲取我們dom元素的實(shí)際高度。
document.documentElement.scrollTop這是獲取滾動(dòng)條滾動(dòng)的高度。

document.documentElement.clientHeight/2整個(gè)瀏覽器高度的一半減去document.getElementById("gd").offsetHeight/2我們dom元素高度的一半。就是我們這個(gè)DOM元素要居中所需要距離當(dāng)前瀏覽器頂部的top距離。但是這只是個(gè)死的高度。因?yàn)闉g覽器的內(nèi)容不可能正好就是小于等于瀏覽器當(dāng)前窗口的高度。內(nèi)容特別高的時(shí)候會(huì)出現(xiàn)滾動(dòng)條。好在我們有document.documentElement.scrollTop也就是我們滾動(dòng)條滾動(dòng)的高度。把他加上就是即時(shí)dom元素需要居中時(shí)候距離當(dāng)前瀏覽器頂部的top距離，當(dāng)然下面那句的算法和這個(gè)是一樣的，我就不多說了，也讓大家自己理解一下，這樣印象會(huì)深刻一點(diǎn)。

不知道我這樣說大家理解沒有。這個(gè)應(yīng)該用個(gè)圖文說明的。不過我覺得我說的應(yīng)該挺清楚了。大家如果還有點(diǎn)模糊。在紙上畫畫也就能明白了。
這個(gè)距離清楚了的話?，F(xiàn)在我們只需要做最后一件事了。就是讓滾動(dòng)條滾動(dòng)的時(shí)候。即時(shí)的把這個(gè)滾動(dòng)的高度給加進(jìn)去。然后把即時(shí)的這個(gè)t和l值設(shè)置到dom的top和left屬性中去。這樣就能給用戶造成個(gè)假象。以為這個(gè)是固定在那里的。

這段就是這個(gè)作用。if(isIE6)就是當(dāng)isIE6這個(gè)為真時(shí)。也就是當(dāng)是IE6的瀏覽器的時(shí)候。setInterval(...,1)這個(gè)是設(shè)置個(gè)時(shí)鐘讓在IE6的瀏覽器下每隔1微秒執(zhí)行一下語句。也就是不斷的在更新t和l的值。然后不斷的付給DOM元素的top和left屬性，1微秒非?？?。用戶拉滾動(dòng)條的速度不可能只需要1微秒的時(shí)間。所以用戶也就不可能看出來什么。以為那個(gè)就是固定在那里的。當(dāng)然你也可以設(shè)置一個(gè)滾動(dòng)事件windon.onscroll。也可以。但是我覺得沒這種好。大家有興趣的也可以研究一下（大家別閑我啰嗦，我覺得自己多研究一下東西，比我教大家一大堆東西都有用）。

當(dāng)然如果不是IE6的瀏覽器都支持fixed屬性。就執(zhí)行這些語句了。
document.getElementById("gd").style.position = "fixed"http://給dom元素加一個(gè)fixed屬性
document.getElementById("gd").style.top = t + "px";//初始化時(shí)給dom元素設(shè)置一個(gè)居中的t值。
document.getElementById("gd").style.left = l + "px";//初始化時(shí)給dom元素設(shè)置一個(gè)居中的l值

好了。這篇就到這里了。這里只是居中。還有什么固定底部拉，固定居左拉等等。道理都是一樣的。只是計(jì)算top和left不一樣而已。大家沒事可以自己研究一下。還有setInterval和setTimeout這兩個(gè)方法。以后出教程會(huì)用到很多

最新評論