終於可以抽出點時間再出一篇教程了。廢話不多說了。今天這篇就教大家一個常用的效果。固定居中效果。其實這個應該不列入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這兩個方法。以後出教程會用到很多