Javascript執行個體代碼:固定置中效果

文章簡介：終於可以抽出點時間再出一篇教程了。廢話不多說了。今天這篇就教大家一個常用的效果。固定置中效果。其實這個應該不列入JS教程的範疇。

終於可以抽出點時間再出一篇教程了。廢話不多說了。今天這篇就教大家一個常用的效果。固定置中效果。其實這個應該不列入JS教程的範疇。應為FF，IE6以上瀏覽器都支援fixed這個固定屬性。唯獨IE6不支援。所以我為了可惡的IE6。我這裡就出一篇教程吧。而且這種效果也可以鍛煉同學們的計算能力。以後很多效果都需要你的計算能力。哈哈

固定置中。或者固定在任何地方思想幾乎是一樣的。只你要演算法清楚了。效果寫起來就輕而易舉了。先貼代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body,div{padding:0px;margin:0px;}
#gd{width:100px;height:100px;background:#F00;color:#FFF;}
</style>
<script>
window.onload = function(){
        var isIE=!!window.ActiveXObject;
        var isIE6=isIE&&!window.XMLHttpRequest;
        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;
        if(isIE6){
                setInterval(function(){
                        t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop;
                        l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft;                       
                        document.getElementById("gd").style.position = "absolute"
                        document.getElementById("gd").style.top = t + "px";
                        document.getElementById("gd").style.left = l + "px";
                        },1)
        }
        else{
                document.getElementById("gd").style.position = "fixed"
                document.getElementById("gd").style.top = t + "px";
                document.getElementById("gd").style.left = l + "px";
        }
}
</script>
<title>固定置中</title>
</head>
<body>
<div id="gd">
        我就在中間隨便你們怎麼改變視窗大小和高度
</div>
<div style="height:1200px;">
</div>
</body>
</html>

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

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;
這兩句是重點。我要仔細說下：
document.documentElement.clientHeight這個是擷取當前瀏覽器視窗的高度。
document.getElementById("gd").offsetHeight這是擷取我們dom元素的實際高度。
document.documentElement.scrollTop這是擷取捲軸滾動的高度。

document.documentElement.clientHeight/2整個瀏覽器高度的一半減去document.getElementById("gd").offsetHeight/2我們dom元素高度的一半。就是我們這個DOM元素要置中所需要距離當前瀏覽器頂部的top距離。但是這隻是個死的高度。因為瀏覽器的內容不可能正好就是小於等於瀏覽器當前視窗的高度。內容特別高的時候會出現捲軸。好在我們有document.documentElement.scrollTop也就是我們捲軸滾動的高度。把他加上就是即時dom元素需要置中時候距離當前瀏覽器頂部的top距離，當然下面那句的演算法和這個是一樣的，我就不多說了，也讓大家自己理解一下，這樣印象會深刻一點。

不知道我這樣說大家理解沒有。這個應該用個圖文說明的。不過我覺得我說的應該挺清楚了。大家如果還有點模糊。在紙上畫畫也就能明白了。
這個距離清楚了的話。現在我們只需要做最後一件事了。就是讓捲軸滾動的時候。即時的把這個滾動的高度給加進去。然後把即時的這個t和l值設定到dom的top和left屬性中去。這樣就能給使用者造成個假象。以為這個是固定在那裡的。
if(isIE6){
setInterval(function(){
t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop;
l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft;
document.getElementById("gd").style.position = "absolute"
document.getElementById("gd").style.top = t + "px";
document.getElementById("gd").style.left = l + "px";
},1)
這段就是這個作用。if(isIE6)就是當isIE6這個為真時。也就是當是IE6的瀏覽器的時候。setInterval(...,1)這個是設定個時鐘讓在IE6的瀏覽器下每隔1微秒執行一下語句。也就是不斷的在更新t和l的值。然後不斷的付給DOM元素的top和left屬性，1微秒非常快。使用者拉捲軸的速度不可能只需要1微秒的時間。所以使用者也就不可能看出來什麼。以為那個就是固定在那裡的。當然你也可以設定一個滾動事件windon.onscroll。也可以。但是我覺得沒這種好。大家有興趣的也可以研究一下（大家別閑我囉嗦，我覺得自己多研究一下東西，比我教大家一大堆東西都有用）。

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

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