JavaScript基礎(chǔ)知識到高級應(yīng)用(3)

1、JavaScript基礎(chǔ)知識到高級應(yīng)用Scsnbxjyj hfJavaScript的資料很多，但從未從頭到尾學(xué)完過。偶遇blue老師的被榮為“最經(jīng)典的JavaScrip視頻教程”后，愛不釋眼，筆記過程中奇想何不筆錄下來，故有此教程。教程中夾有個人的理解，由于水平有限，請以blue老師的講解為準(zhǔn)。第八課 JS運動基礎(chǔ)一、運動基礎(chǔ)運動不只是位置的變化，還可以是其它一些變化，如透明度的變化，我們都可以歸為運動。1、讓一個DIV動起來讓一個div動起來大體上需要兩步：第一步，給div加絕對定位屬性以及諸如left的定位值，否則這個div是不能動起來的；第二步，開一個定時器，讓定時器執(zhí)行的函數(shù)不斷改變那

2、個div的left的值，這樣這個div就會運動起來了。如下例：無標(biāo)題文檔#div1 width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;function startMove()var oDiv=document.getElementById(div1);setInterval(function ()oDiv.style.left=oDiv.offsetLeft+10+px;, 30);定時器里的30，其單位是毫秒，即每隔30毫秒運行函數(shù)一次，為什么是30，這是一個經(jīng)驗值，設(shè)為30時，其

3、運行顯得相對平滑一些，看起來合理一些。為什么使用offsetLeft來給left賦值，以及為何還要加上px這樣的單位字符，請參看第五課定時器里第五節(jié)的無縫滾動課程內(nèi)容。程序運行界面如上圖所示，當(dāng)我們單擊一下“開始運動”按鈕后，那個紅色的div就會一直往右邊跑，即使運動到屏幕外也在跑（通過觀察下邊的滾動條變化可發(fā)現(xiàn)它仍在運行）。如果我們想讓它運動到某個位置如左邊距為300px時停下來，該怎樣做呢？關(guān)閉定時器就可達到此目的。先定義一個變量用于存放定時器var timer=null，開定時器就把定時器賦給這個變量timer=setInterval(function (), 30)，然后在定時器執(zhí)行的

4、函數(shù)里增加一判斷語句，如果div的左邊距等于300時，就關(guān)閉定時器，其JS代碼如下：var timer=null;function startMove()var oDiv=document.getElementById(div1);timer=setInterval(function ()if(oDiv.offsetLeft=300)clearInterval(timer);oDiv.style.left=oDiv.offsetLeft+10+px;, 30);經(jīng)此一改，div確實能自動停下來了，但此程序有不完善的地方，當(dāng)div停下來的時候，我們再次單擊“開始運動”按鈕，div又會不斷地向右邊

5、跑起來了。我們可能是會想不通的，雖然再次單擊“開始運動”按鈕，定時器會重啟，但if(oDiv.offsetLeft=300)為真，緊接著就會關(guān)閉這個定時器的，為何還要動呢？實際上定時器是先啟動后關(guān)閉，在啟動的過程中又要關(guān)閉時，它會把關(guān)閉動作推遲到下一個時間段里去執(zhí)行，現(xiàn)在這個時間段里的代碼會照常執(zhí)行一遍。按常理來講好像也說得過去，那就是如果定時器都未啟動又何必談關(guān)閉呢，所以它會先讓定時器啟動起來使定時器存在，再去關(guān)閉。那么按此原理，oDiv.style.left=oDiv.offsetLeft+10+px這句照樣執(zhí)行，此時div的left值就為310px了，那么在下一時間段里來執(zhí)行關(guān)閉動作時，

6、oDiv.offsetLeft=300就不為真了，所以會動起來。這是使用=判斷所造成的，我們?nèi)绻裲Div.style.left=oDiv.offsetLeft+10+px中的10改成7即oDiv.style.left=oDiv.offsetLeft+7+px再運行時，將發(fā)現(xiàn)div根本不會停下來。因為當(dāng)?shù)?2個30毫秒時，div的left值為294px，第43個30毫秒時，div的left值為301px，始終不會等于300px，無條件成立的時候，所以它會一直動。解決辦法也很簡單，只需將oDiv.offsetLeft=300這句改成oDiv.offsetLeft=300即可。經(jīng)此一改，雖然div

7、不會不停地運動了，但會出現(xiàn)另一個現(xiàn)象，每再單擊一次“開始運動”按鈕，div總會向右挪動一點，這一點是7px那么大。其原因就是上面所講的定時器會把其中的代碼執(zhí)行一遍所造成的。完美的做法是，把移動div的這句oDiv.style.left=oDiv.offsetLeft+speed+px放到if的else部分里，條件不滿足時才會被執(zhí)行，就避免了放在外邊總會被執(zhí)行至少一遍的弊端了：var timer=null;function startMove()var oDiv=document.getElementById(div1);timer=setInterval(function ()var spee

8、d=10;if(oDiv.offsetLeft=300)clearInterval(timer);elseoDiv.style.left=oDiv.offsetLeft+speed+px;, 30);這下前面所遇到的問題好像都解決了，似乎程序很完美了，其實不然，當(dāng)我們開始運行程序后，我們不斷地單擊“開始運動”按鈕，將發(fā)現(xiàn)div的移動速度每單擊一次就會增加一些，單擊的次數(shù)越多，其運動的速度就越快。其原因是，每單擊一次程序就開一個定時器，多個定時器疊加在一起，所以移動速度就大了。解決辦法也很簡單，在開定時器之前，關(guān)閉原先的定時器，這樣就保證只有一個定時器了：var timer=null;funct

9、ion startMove()var oDiv=document.getElementById(div1);clearInterval(timer);timer=setInterval(function ()var speed=1;if(oDiv.offsetLeft=300)clearInterval(timer);elseoDiv.style.left=oDiv.offsetLeft+speed+px;, 30);現(xiàn)在我們就有一套比較完整的運動代碼了。2、簡單的運動框架所謂框架就是一套完整的固定的流程，就像模板一樣，直接套用即可。上面程序的完善過程，就是運動框架的形成過程，其最終版就相當(dāng)于

10、一個框架。據(jù)此我們總結(jié)出這個運動框架必須具備下列兩點：1、在開始運動時，關(guān)閉已有定時器2、把運動和停止隔開(if/else)二、運動框架應(yīng)用實例1、“分享到”側(cè)邊欄 如圖，程序開始時只有“分享到”浮在左邊，當(dāng)鼠標(biāo)移入后，原先處于屏幕外的綠色div層向右運動，運動到剛好全部顯示時停止。當(dāng)鼠標(biāo)移開時，綠色div層向左運動，待剛剛?cè)恳瞥銎聊粫r停止。 無標(biāo)題文檔#div1 width:150px; height:200px; background:green; position:absolute; left:-150px;#div1 span position:absolute; width:20p

11、x; height:60px; line-height:20px; background:blue; right:-20px; top:70px;window.onload=function ()var oDiv=document.getElementById(div1);oDiv.onmouseover=function ()startMove();oDiv.onmouseout=function ()startMove2();var timer=null;function startMove()var oDiv=document.getElementById(div1);clearInte

12、rval(timer);timer=setInterval(function ()if(oDiv.offsetLeft=0)clearInterval(timer);elseoDiv.style.left=oDiv.offsetLeft+10+px;, 30);function startMove2()var oDiv=document.getElementById(div1);clearInterval(timer);timer=setInterval(function ()if(oDiv.offsetLeft=-150)clearInterval(timer);elseoDiv.style

13、.left=oDiv.offsetLeft-10+px;, 30);分享到在布局上，綠色的DIV的定位屬性為absolute，其父級為body，所以它是相對于body來定位的?！胺窒淼健笔且粋€span，其定位屬性也為absolute，其結(jié)構(gòu)上的父級是這個綠色的div，而這個父級也設(shè)定了定位屬性，那么這個父級就是span的定位父級，所以這個span是相對于div來定位的。div的寬度為150px，其left為-150px，相對于body定位下來，剛好處于屏幕外，其右邊緣與屏幕左邊緣齊。span的寬度為20px，其right為-20px，則它相對于div定位下來，就是剛好處于div外，其左邊緣與d

14、iv的右邊緣齊，在屏幕上就是它的左邊緣剛好與屏幕的左邊緣齊，好似浮在屏幕的左邊。整體效果如上圖所示。運動部分用JS完成。鼠標(biāo)移入div時，onmouseover激活，執(zhí)行startMove函數(shù)，函數(shù)里首先關(guān)閉原有定時器，開新定時器，定時器執(zhí)行的函數(shù)里判斷側(cè)邊欄的左邊距是否為0，如為0，即側(cè)邊欄剛好全部顯示在屏幕上，關(guān)閉定時器，停止運行。如果不為0，執(zhí)行else語句，每30毫秒把側(cè)邊欄左邊距加10px，側(cè)邊欄則會向右運動。鼠標(biāo)移出div時，onmouseout激活，執(zhí)行startMove2函數(shù)，函數(shù)里首先關(guān)閉原有定時器，開新定時器，定時器執(zhí)行的函數(shù)里判斷側(cè)邊欄的左邊距是否為-150，如為-150

15、，即側(cè)邊欄剛好全部移出屏幕，關(guān)閉定時器，停止運行。如果不為-150，執(zhí)行else語句，每30毫秒把側(cè)邊欄左邊距減10px，側(cè)邊欄則會向左運動。功能已達到，運行時一切正常，但還沒有完，一個程序設(shè)計的最后一步就是代碼優(yōu)化。實際上在上面的程序中，函數(shù)startMove與 startMove2有許多相同的地方，應(yīng)該能合并成一個函數(shù)的。根據(jù)前面課程中所講的原理，不同部分用參數(shù)代替的原則，那么startMove與 startMove2不同的是移動的目標(biāo)位置點與移動的速度（大小、方向），將此兩項用參數(shù)代替合并后的JS代碼如下：window.onload=function ()var oDiv=documen

16、t.getElementById(div1);oDiv.onmouseover=function ()startMove(0,10);oDiv.onmouseout=function ()startMove(-150,-10);var timer=null;function startMove(iTarget,speedj)var oDiv=document.getElementById(div1);clearInterval(timer);timer=setInterval(function ()if(oDiv.offsetLeft=iTarget)clearInterval(timer);

17、elseoDiv.style.left=oDiv.offsetLeft+speed+px;, 30);但這還不是最簡代碼，對于那個速度，兩者在大小上是一樣，只有方向不同，為正時表示向右移動，為負時表示向左移動，然而這個方向可由傳入的目標(biāo)點的值與div自己的offsetLeft值比較一下就可得知，因如果oDiv.offsetLeftiTarget則其移動應(yīng)該是向左的，故其速度為-10，反之為+10，所以我們還可以只使用一個參數(shù)進一步簡化：window.onload=function ()var oDiv=document.getElementById(div1);oDiv.onmouseover

18、=function ()startMove(0);oDiv.onmouseout=function ()startMove(-150);var timer=null;function startMove(iTarget)var oDiv=document.getElementById(div1);clearInterval(timer);timer=setInterval(function ()var speed=0;if(oDiv.offsetLeftiTarget)speed=-10;elsespeed=10;if(oDiv.offsetLeft=iTarget)clearInterval

19、(timer);elseoDiv.style.left=oDiv.offsetLeft+speed+px;, 30);也許你會認(rèn)為這樣做的結(jié)果反而因要判斷移動方向而增加了代碼字節(jié)，不能算是優(yōu)化。這是你把優(yōu)化的標(biāo)準(zhǔn)只定為代碼的字節(jié)數(shù)量上而也，實際上代碼的優(yōu)化不只體現(xiàn)在代碼量減少方面，更主要的是體現(xiàn)在讓用戶怎么以最簡單的方式使用上，因傳入的參數(shù)越少，而功能又不變，用戶就覺得越簡單，這就是優(yōu)化的目的。2、圖片淡入淡出在火狐、谷歌中，可使用Opacity屬性用來設(shè)置一個元素的透明度，取值范圍是01之間，不可為負值。opacity取值為1是完全不透明，取值為0是完全透明，視覺上看不見。其語法如opaci

20、ty:0.3，意為透明度為30%。IE9+才開始支持CSS3 opacity，而對IE6-IE8我們習(xí)慣使用filter濾鏡屬性來進行實現(xiàn)。IE 從4.0版開始，就提供了一些內(nèi)置的多媒體濾鏡特效，具體的使用方法是：語法：filter : filters參數(shù)：filters : 要使用的濾鏡效果。多個濾鏡之間用空格隔開。IE4.0以上版本，支持以下14種濾鏡： 濾鏡名 說明Alpha 讓HTML元件呈現(xiàn)出透明的漸進效果Blur 讓HTML元件產(chǎn)生風(fēng)吹模糊的效果Chroma 讓圖像中的某一顏色變成透明色DropShadow 讓HTML元件有一個下落式的陰影FlipH 讓HTML元件水平翻轉(zhuǎn)Flip

21、V 讓HTML元件垂直翻轉(zhuǎn)Glow 在元件的周圍產(chǎn)生光暈而模糊的效果Gray 把一個彩色的圖片變成黑白色Invert 產(chǎn)生圖片的照片底片的效果Light 在HTML元件上放置一個光影Mask 利用另一個HTML元件在另一個元件上產(chǎn)生圖像的遮罩Shadow 產(chǎn)生一個比較立體的陰影Wave 讓HTML元件產(chǎn)生水平或是垂直方向上的波浪變形XRay 產(chǎn)生HTML元件的輪廓，就像是照X光一樣羅列出這么多來，目的是讓大家有所了解，我們這里只管利用Alpha濾鏡來控制透明度實現(xiàn)淡入淡出即可，其語法為filter:alpha(opacity=sqlN)或filter:alpha(opacity:sqlN)，s

22、qlN取值從0到100，0表是完全透明，100表示完全不透明。FF與IE這兩大類瀏覽器對透明度的支持方式不同，假設(shè)我們要將ID為div1的透明度設(shè)為30%，怎樣做到兼容呢？其實很簡單，就是把兩種寫法均寫出來，不支持的那種寫法會被瀏覽器忽略，如：#div1 width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;下面我們著手來實現(xiàn)淡入淡出功能。如下圖，div初始透明度為30%，當(dāng)鼠標(biāo)進入后，透明度值逐漸變?yōu)?00%，鼠標(biāo)移出后逐漸還原為30%。 在JS里，運動不只是位置的變化，這種透明度的變

23、化也可用我們前面介紹的運動框架來完成，所以這也是一種運動。在前邊所做的“分享到”實例中，因在JS里有offsetLeft屬性讓我們能很方便地獲得元素的位置，所以實現(xiàn)運動功能就變得容易一些，而透明度，在JS里是沒有offsetAlpha這屬性的，也就是說我們是不能像位置那樣去直接獲取與設(shè)置了。在這里，我們應(yīng)用了程序設(shè)計的一個重要思想，就是把一些要表現(xiàn)的東西，用一些變量來存取，把要進行的操作轉(zhuǎn)換成對變量的操作，從而達到控制的目的。我們定義一個全局變量var alpha=30;其初值為30，表示透明度，如果鼠標(biāo)是移入，我們讓其值變大，然后賦給div；如果是鼠標(biāo)移出，讓其值變小，再賦給div。也就是通

24、過一個中間變量來模擬透明度，存取該變量的值從而操作透明度，其完整代碼如下：無標(biāo)題文檔#div1 width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;window.onload=function ()var oDiv=document.getElementById(div1);oDiv.onmouseover=function ()startMove(100);oDiv.onmouseout=function ()startMove(30);var alpha=30;var timer=

25、null;function startMove(iTarget)var oDiv=document.getElementById(div1);clearInterval(timer);timer=setInterval(function ()var speed=0;if(alphaiTarget)speed=10;elsespeed=-10;if(alpha=iTarget)clearInterval(timer);elsealpha+=speed;oDiv.style.filter=alpha(opacity:+alpha+);oDiv.style.opacity=alpha/100;, 3

26、0);三、緩沖運動1、緩沖運動基本前面所講的運動是勻速運動，緩沖運動是變速運動，像拉伸或壓縮的彈簧被釋放后一樣，是先快后慢。彈簧產(chǎn)生這種運動是因彈簧的形變在改變，其彈力在不斷變小，加速度不斷變小，所以會先快后慢。在JS里我們用一變化的變量來代替速度，讓它先大后小，最后為零，就模擬出緩沖了。一個元素要從一個初始位置到一個目標(biāo)位置，起初時的距離較遠，我們讓其速度較大，隨著距離越來越近，我們讓其速度越來越小，到達目標(biāo)位置時速度為零，這樣展現(xiàn)出來的就是緩沖運動了。速度的大小跟距離有關(guān)，距離大速度就大，距離小速度就小，換句話說，速度與距離成正比。假設(shè)一個div要運動到300處，這個300就是目標(biāo)位置，d

27、iv在運動中的位置即當(dāng)前位置是在不斷變化的，我們可用JS里offsetLeft來取得，假設(shè)div元素存儲在oDiv變量里，那么oDiv.offsetLeft就是這個div運動過程中的當(dāng)前位置，表達式300-oDiv.offsetLeft的值就會越來越小，能否就用它來當(dāng)作速度呢：無標(biāo)題文檔#div1 width:100px; height:100px; background:red; position:absolute; left:0; top:50px;function startMove()var oDiv=document.getElementById(div1);setInterval(

28、function ()var speed=300-oDiv.offsetLeft;oDiv.style.left=oDiv.offsetLeft+speed+px;, 30);運行程序，當(dāng)我們一單擊“開始運動”按鈕，一瞬間，紅色塊就到達了目的地。開始時，div的left值為0，oDiv.offsetLeft也就等于0，那么300-oDiv.offsetLeft就等于300，即速度值就為其距離值，所以定時器一啟動，在第一個30毫秒內(nèi)就把它直接移到目標(biāo)位置了。知道原因了，解決也就簡單了，我們可以取這個差值的幾分之幾作為速度值即可解決這個問題，比如將var speed=300-oDiv.offset

29、Left;這句改成var speed=(300-oDiv.offsetLeft)/10;經(jīng)此一改后，再運行程序，運動緩沖起來了，達到我們的目的了。但程序設(shè)計不能到此就完事了，我們還要看有沒有bug。我們布局上，增加一個div，位置在目標(biāo)位置300處，其寬度為1px，高度為300px，看起來就是一條線：#div2 width:1px; height:300px; position:absolute; left:300px; top:0; background:black;程序運行后如下圖所示：那個紅色塊并沒有到達300處。如果我們在JS中增加一句：document.title=oDiv.offs

30、etLeft+,+speed;將紅色塊當(dāng)前的左邊距、速度值作為文檔的標(biāo)題信息顯示出來：無標(biāo)題文檔#div1 width:100px; height:100px; background:red; position:absolute; left:0; top:50px;#div2 width:1px; height:300px; position:absolute; left:300px; top:0; background:black;function startMove()var oDiv=document.getElementById(div1);setInterval(function (

31、)var speed=(300-oDiv.offsetLeft)/10;oDiv.style.left=oDiv.offsetLeft+speed+px;document.title=oDiv.offsetLeft+,+speed;, 30);上圖為在chrome中運行情況，從標(biāo)題文字信息可看出此時div的左邊距為296，速度為0.4。上圖為在IE中運行情況，從標(biāo)題文字信息可看出此時div的左邊距為291，速度為0.9。雖然這兩大類瀏覽器的計算結(jié)果不一致，但都沒有準(zhǔn)確地運動到300處。下面我們以IE為例來探討為什么會停在291處。像素1px，是屏幕顯示時的最小單位。如果我們把樣式寫成left:

32、291.9px，瀏覽器會直接把后面的小數(shù)忽略掉定為291，也就是說，當(dāng)div運行到291處時，它與目標(biāo)點300之間的距離為9，var speed=(300-oDiv.offsetLeft)/10后的speed為0.9，緊接著執(zhí)行下句：oDiv.style.left=oDiv.offsetLeft+speed+px，其left賦值后將為291.9，瀏覽器會把小數(shù)位直接干掉，最終賦值為291，再到下一個30毫秒段時，程序也是這樣處理的，所以它會停在291處。在JS里有一Math對象，里面集成了許多數(shù)學(xué)方法，其中有一對向上取整ceil()、向下取整floor()的方法正好能用在這里，解決這個問題。向

33、上取整，就是取大于它的最小整數(shù)，如：ceil(3.14)=4；ceil(-1.32)=-1；ceil(-0.998)=0。向下取整，就是取小于它的最大整數(shù)，如floor(3.99)=3; floor(-1.32)=-2; floor(-0.998)=-1。我們在上面的JS代碼中增加一句：function startMove()var oDiv=document.getElementById(div1);setInterval(function ()var speed=(300-oDiv.offsetLeft)/10;speed=Math.ceil(speed);oDiv.style.left=

34、oDiv.offsetLeft+speed+px;document.title=oDiv.offsetLeft+,+speed;, 30);再次運行，就可解決那個問題了：當(dāng)speed=0.9時，speed=Math.ceil(speed)后speed=1，div將向前運動1px，左邊距變?yōu)?92，下一循環(huán)時，speed=0.8，ceil后仍為1，div又向前移動1px，左邊距變?yōu)?93，如此循環(huán)直到300，速度為0時停止。但這一改進，只適用于從左往右運動這種情況。如果我們把div的left的值由0變?yōu)?00：#div1 width:100px; height:100px; background

35、:red; position:absolute; left:600px; top:50px;，其它不變，再運行：這是初始狀態(tài) 這是程序運動后的結(jié)果那個紅色塊又不能準(zhǔn)確到達300位置。因現(xiàn)在的初始位置在600處，比目標(biāo)位置大，移動過程中的當(dāng)前位置均比目標(biāo)位置大，由var speed=(300-oDiv.offsetLeft)/10計算出來的速度值為負值，那么oDiv.style.left=oDiv.offsetLeft+speed+px將會使它的左邊距值不斷減小，即向左移動，然而在這句之前的向上取整speed=Math.ceil(speed)會出現(xiàn)ceil(-0.9)=0，所以它會停在309處。

36、此時我們將speed=Math.ceil(speed)改成speed=Math.floor(speed);向下取整，使其floor(-0.9)=-1即解決此問題。我們在程序中使用一判斷語句，如果速度為正，則向上取整，反之向下取整，那么我們就可以用一套程序完成兩套程序才能完成的事情，就可大大增強程序的通用性了：function startMove()var oDiv=document.getElementById(div1);setInterval(function ()var speed=(300-oDiv.offsetLeft)/10;/speed=Math.floor(speed);spe

37、ed=speed0?Math.ceil(speed):Math.floor(speed);oDiv.style.left=oDiv.offsetLeft+speed+px;document.title=oDiv.offsetLeft+,+speed;, 30);2、緩沖運動實例(1)onscroll事件及scrollTop屬性html里面的事件中,onscroll是滾動條在滾動時觸發(fā)的事件。為窗口添加滾動條事件其實非常的簡單，window.onscroll=function();對于滾動條有兩個重要的屬性scrollLeft與scrollTop。scrollLeft 屬性是設(shè)置或獲取位于滾動條

38、對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離。 scrollTop 屬性是設(shè)置或獲取位于滾動條對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離。各瀏覽器下 scrollTop的差異 IE6/7/8： 對于沒有doctype聲明的頁面里可以使用 document.body.scrollTop 來獲取 scrollTop高度 ； 對于有doctype聲明的頁面則可以使用 document.documentElement.scrollTop； Safari: safari 比較特別，有自己獲取scrollTop的函數(shù) ： window.pageYOffset ； Firefox: 火狐等等相對標(biāo)準(zhǔn)些

39、的瀏覽器就省心多了，直接用document.documentElement.scrollTop;綜上情況，完美獲取scrollTop的賦值短語是：var scrollTop = document.documentElement.scrollTop | window.pageYOffset | document.body.scrollTop; scrollTop到底是什么，下面我們用實例來說明。有些情況下,“元素中內(nèi)容”的高度會超過“元素本身”的高度, 下面的演示中，外層元素的高度值是200px,內(nèi)層元素的高度值是300px。很明顯，“外層元素中的內(nèi)容”高過了“外層元素”本身.當(dāng)向下拖動滾動條時

40、，有部分內(nèi)容會隱沒在“外層元素的上邊界”之外，scrollTop就等于這部分“不可見的內(nèi)容”的高度。無標(biāo)題文檔 這些文字顯示在內(nèi)層元素中。 解釋：內(nèi)層元素的高度值300px 外層元素的高度值200px,因此“外層元素的內(nèi)容”(也就是“內(nèi)層元素”)無法完全顯示，而外層元素把overflow設(shè)置為auto，因此外層元素的右側(cè)會出現(xiàn)一個上下方向的滑動條。初始狀態(tài)下，“內(nèi)層元素的上邊界”和“外層元素的上邊界”重合，沒有任何內(nèi)容超過“外層元素的上邊界”，此時scrollTop屬性的值為0。當(dāng)向下拖動滾動條時，超過“外層元素的上邊界”的內(nèi)容會逐漸增多，scrollTop值就等于這些超出的部分。當(dāng)拖動滾動條

41、到最底部時，“內(nèi)層元素的下邊界”和“外層元素的下邊界”重合，超過“外層元素的上邊界”的內(nèi)容的高度=300px-200px=100px，這也就是此時的scrollTop值。注意：scrollTop的使用方式是element.scrollTop，而不是element.style.scrollTop在下面的演示實例中，拖動滾動條的過程中，會讀取此時的scrollTop的值，并在下方文字中顯示出來：無標(biāo)題文檔 這些文字顯示在內(nèi)層元素中。 scrollTop值是： var outerdiv = document.getElementById(outer); outerdiv.onscroll=readS

42、cr; /注冊onscroll事件處理函數(shù)。當(dāng)拖動滾動條時，會產(chǎn)生onscroll事件 var oSpa = document.getElementById(spa); /onscroll事件的處理函數(shù) function readScr () oSpa.innerHTML= outerdiv.scrollTop; /讀取外層元素此時的scrollTop的值并顯示出來 readScr (); /頁面加載完成后，執(zhí)行一次此函數(shù)。顯示最初的scrollTop值，此時的值為0 解釋：當(dāng)拖動“外層元素的滾動條”時，會產(chǎn)生onscroll事件。為這個事件注冊一個名為readScr的處理函數(shù)，在readSc

43、r這個事件處理函數(shù)中，通過outerdiv.scrollTop得到“外層元素”當(dāng)時的scrollTop的值，并顯示在頁面上。(2)關(guān)于clientHeight、offsetHeight、scrollHeight我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。clientHeight大家對 clientHeight 都沒有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽

44、器中可以看到內(nèi)容的這個區(qū)域的高度，一般是最后一個工具條以下到狀態(tài)欄以上的這個區(qū)域，與頁面內(nèi)容無關(guān)。offsetHeightIE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動條 + 邊框。NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。scrollHeightIE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。簡單地說clientHeight 就是透過瀏覽

45、器看內(nèi)容的這個區(qū)域高度。NS、FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實際高度。同理clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。=clientHeight

46、與offsetHeight的區(qū)別許多文章已經(jīng)介紹了clientHeight和offsetHeight的區(qū)別，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么組成的呢？如何計算這兩個數(shù)的值？IE中： document.body.clientWidth = BODY對象寬度document.body.clientHeight = BODY對象高度document.documentElement.clientWidth = 可見區(qū)域?qū)挾萪ocument.

47、documentElement.clientHeight = 可見區(qū)域高度FireFox中： document.body.clientWidth = BODY對象寬度document.body.clientHeight = BODY對象高度document.documentElement.clientWidth = 可見區(qū)域?qū)挾萪ocument.documentElement.clientHeight = 可見區(qū)域高度Opera中： document.body.clientWidth = 可見區(qū)域?qū)挾萪ocument.body.clientHeight = 可見區(qū)域高度document.doc

48、umentElement.clientWidth = 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight = 頁面對象高度（即BODY對象高度加上Margin高） 沒有定義W3C的標(biāo)準(zhǔn)，則IE為： document.documentElement.clientWidth = 0document.documentElement.clientHeight = 0FireFox為：document.documentElement.clientWidth = 頁面對象寬度（即BODY對象寬度加上Margin寬)document.documentEle