版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
JavaScript基礎(chǔ)知識到高級應(yīng)用
Scsnbxjyjhf
JavaScript的資料很多，但從未從頭到尾學(xué)完過。偶遇blue老師的被榮為“最經(jīng)典的
JavaScrip視頻教程”后，愛不釋眼，筆記過程中奇想何不筆錄下來，故有此教程。教程中夾
有個人的理解，由于水平有限，請以blue老師的講解為準(zhǔn)。
第八課JS運動基礎(chǔ)
一、運動基礎(chǔ)
運動不只是位置的變化，還可以是其它一些變化，如透明度的變化，我們都可以歸為運
動。
1、讓一個DIV動起來
讓一個div動起來大體上需要兩步：第一步，給div加絕對定位屬性以及諸如left的定
位值，否則這個div是不能動起來的；第二步，開一個定時器，讓定時器執(zhí)行的函數(shù)不斷改
變那個div的Ie代的值，這樣這個div就會運動起來了。如下例：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔
<style>
#divl{width:200px;height:200px;background:red;position:absolute;top:50px;left:Opx;}
</style>
<script>
functionstartMove()
varoDiv=document.getElementByld('divl');
setlnterval(function(){
oDiv.style.left=oDiv.offsetLeft+10+'px';
),30);
)
</script>
</head>
<body>
<inputid="btnl"type="button"value="開始運動"onclick="startMove()"/>
<divid="divl">
</div>
</body>
</html>
定時器里的30,其單位是毫秒，即每隔30毫秒運行函數(shù)一次，為什么是30,這是一個
經(jīng)驗值，設(shè)為30時，其運行顯得相對平滑一些，看起來合理一些。
為什么使用。ffsetLeft來給left賦值，以及為何還要加上'p*這樣的單位字符，請參看第
五課定時器里第五節(jié)的無縫滾動課程內(nèi)容。
開始運動
程序運行界面如上圖所示，當(dāng)我們單擊一下“開始運動”按鈕后，那個紅色的div就會
一直往右邊跑，即使運動到屏幕外也在跑(通過觀察下邊的滾動條變化可發(fā)現(xiàn)它仍在運行)。
如果我們想讓它運動到某個位置如左邊距為300Px時停下來，該怎樣做呢？關(guān)閉定時器
就可達(dá)到此目的。
先定義一個變量用于存放定時器vartimer=null,開定時器就把定時器賦給這個變量
timer=setlnterval(function(){...},30),然后在定時器執(zhí)行的函數(shù)里增加一判斷語句，如果div
的左邊距等于300時，就關(guān)閉定時器，其JS代碼如下：
<script>
vartimer=null;
functionstartMove()
(
varoDiv=document.getElementByld('divl');
timer=setlnterval(function(){
if(oDiv.offsetLeft==300)
(
clearlnterval(timer);
}
oDiv.style.left=oDiv.offsetLeft+10+'px';
}f30);
)
</script>
經(jīng)此一改，div確實能自動停下來了，但此程序有不完善的地方，當(dāng)div停下來的時候，
我們再次單擊“開始運動”按鈕，div又會不斷地向右邊跑起來了。
我們可能是會想不通的，雖然再次單擊“開始運動”按鈕，定時器會重啟，但
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)閉動作時，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不會不停地運動了，但會出現(xiàn)另一個現(xiàn)象，每再單擊一次“開始運
動”按鈕，div總會向右挪動一點，這一點是7Px那么大。其原因就是上面所講的定時器會
把其中的代碼執(zhí)行一遍所造成的。
完美的做法是，把移動div的這句oDiv.style.left=oDiv.offsetLeft+speed+'px'放到if的else
部分里，條件不滿足時才會被執(zhí)行，就避免了放在外邊總會被執(zhí)行至少一遍的弊端了：
</style>
<script>
vartimer=null;
functionstartMove()
(
varoDiv=document.getElementByld('divl');
timer=setlnterval(function(){
varspeed=10;
if(oDiv.offsetLeft>=300)
(
clearlnterval(timer);
)
else
(
oDiv.style.left=oDiv.offsetLeft+speed+'px*;
}
},30);
)
</script>
這下前面所遇到的問題好像都解決了，似乎程序很完美了，其實不然，當(dāng)我們開始運行
程序后，我們不斷地單擊“開始運動”按鈕，將發(fā)現(xiàn)div的移動速度每單擊一次就會增加一
些，單擊的次數(shù)越多，其運動的速度就越快。
其原因是，每單擊一次程序就開一個定時器，多個定時器疊加在一起，所以移動速度就
大了。解決辦法也很簡單，在開定時器之前，關(guān)閉原先的定時器，這樣就保證只有一個定時
器了:
<script>
vartimer=null;
functionstartMove()
(
varoDiv=document.getElementByld('divl,);
clearlnterval(timer);
timer=setlnterval(function(){
varspeed=l;
if(oDiv.offsetLeft>=300)
(
clearlnterval(timer);
}
else
(
oDiv.styleJeft=oDiv.offsetLeft+speed+*px';
}
},30);
)
</script>
現(xiàn)在我們就有一套比較完整的運動代碼了。
2、簡單的運動框架
所謂框架就是一套完整的固定的流程，就像模板一樣，直接套用即可。
上面程序的完善過程，就是運動框架的形成過程，其最終版就相當(dāng)于一個框架。據(jù)此我
們總結(jié)出這個運動框架必須具備下列兩點：
1、在開始運動時，關(guān)閉已有定時器
2、把運動和停止隔開(if/else)
二、運動框架應(yīng)用實例
1、“分享到”側(cè)邊欄
如圖，程序開始時只有“分享到”浮在左邊，當(dāng)鼠標(biāo)移入后，原先處于屏幕外的綠
色div層向右運動，運動到剛好全部顯示時停止。當(dāng)鼠標(biāo)移開時，綠色div層向左運動，待
剛剛?cè)恳瞥銎聊粫r停止。
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔
<style>
#divl{width:150px;height:200px;background:green;position:absolute;left:-150px;}
#divlspan{position:absolute;width:20px;height:60px;line-height:20px;background:blue;
right:-20px;top:70px;}
</style>
<script>
window.onload=function()
(
varoDiv=document.getElementByld('divl');
oDiv.onmouseover=function()
startMove();
);
oDiv.onmouseout=function()
(
startMove2();
)；
)；
vartimer=null;
functionstartMove()
(
varoDiv=document.getElementByld(,divl');
clearlnterval(timer);
timer=setlnterval(function(){
if(oDiv.offsetLeft==0)
(
clearlnterval(timer);
}
else
(
oDiv.style.left=oDiv.offsetLeft+10+'px';
)
},30);
}
functionstartMove2()
(
varoDiv=document.getElementByld(,divl,);
clearlnterval(timer);
timer=setlnterval(function(){
if(oDiv.offsetLeft==-150)
clearlnterval(timer);
)
else
(
oDiv.style.left=oDiv.offsetLeft-10+'px';
)
},30);
)
</script>
</head>
<body>
<divid=ndivl">
<span>分享至k/span>
</div>
</body>
</html>
在布局上，綠色的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外,
其左邊緣與div的右邊緣齊，在屏幕上就是它的左邊緣剛好與屏幕的左邊緣齊，好似浮在屏
幕的左邊。整體效果如上圖所示。
運動部分用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,即側(cè)邊
欄剛好全部移出屏幕，關(guān)閉定時器，停止運行。如果不為-150,執(zhí)行else語句，每30毫秒
把側(cè)邊欄左邊距減10px,側(cè)邊欄則會向左運動。
功能己達(dá)到，運行時一切正常'，但還沒有完，一個程序設(shè)計的最后一步就是代碼優(yōu)化。
實際上在上面的程序中，函數(shù)startMove與startMove2有許多相同的地方，應(yīng)該能合并成
一個函數(shù)的。
根據(jù)前面課程中所講的原理，不同部分用參數(shù)代替的原則，那么startMove與
startMove2不同的是移動的目標(biāo)位置點與移動的速度(大小、方向)，將此兩項用參數(shù)代替
合并后的JS代碼如下：
<script>
window.onload=function()
(
varoDiv=document.getElementByld('divl');
oDiv.onmouseover=function()
(
startMove(0,10);
)；
oDiv.onmouseout=function()
{
startMove(-150,-10);
)；
)；
vartimer=null;
functionstartMove(iTargetzspeedj)
(
varoDiv=document.getElementByld('divl');
clearlnterval(timer);
timer=setlnterval(function(){
if(oDiv.offsetLeft==iTarget)
(
clearlnterval(timer);
)
else
(
oDiv.style.left=oDiv.offsetLeft+speed+'px';
)
),30);
)
</script>
但這還不是最簡代碼，對于那個速度，兩者在大小上是一樣，只有方向不同，為正時表
示向右移動，為負(fù)時表示向左移動，然而這個方向可由傳入的目標(biāo)點的值與div自己的
offsetLeft值比較一下就可得知，因如果oDiv.offsetLeft>iTarget則其移動應(yīng)該是向左的，故其
速度為?10,反之為+10,所以我們還可以只使用一個參數(shù)進(jìn)一步簡化：
<script>
window.onload=function()
(
varoDiv=document.getElementByld('divl,);
oDiv.onmouseover=function()
(
startMove(O);
)；
oDiv.onmouseout=function()
startMove(-150);
);
)；
vartimer=null;
functionstartMove(iTarget)
(
varoDiv=document.get日ementByld('divl');
clearlnterval(timer);
timer=setlnterval(function(){
varspeed=0;
if(oDiv.offsetLeft>iTarget)
(
speed=-10;
)
else
(
speed=10;
)
if(oDiv.offsetLeft==iTarget)
(
clearlnterval(timer);
)
else
(
oDiv.style.left=oDiv.offsetLeft+speed+'px';
)
},30);
)
</script>
也許你會認(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è)置一個元素的透明度，取值范圍是0~1之
間，不可為負(fù)值。opacity取值為1是完全不透明，取值為0是完全透明，視覺上看不見。
其語法如opacity:0.3,意為透明度為30%。IE9+才開始支持CSS3opacity,而對IE6-IE8我
們習(xí)慣使用filter濾鏡屬性來進(jìn)行實現(xiàn)。IE從4.0版開始，就提供了一些內(nèi)置的多媒體濾鏡
特效，具體的使用方法是：
語法：filter:filters
參數(shù)：filters:要使用的濾鏡效果。多個濾鏡之間用空格隔開。
IE4.0以上版本，支持以下14種濾鏡：
濾鏡名說明
Alpha讓HTML元件呈現(xiàn)出透明的漸進(jìn)效果
Blur讓HTML元件產(chǎn)生風(fēng)吹模糊的效果
Chroma讓圖像中的某一顏色變成透明色
DropShadow讓HTML元件有一個下落式的陰影
FlipH讓HTML元件水平翻轉(zhuǎn)
FlipV讓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)wJcfilter:alpha(opacity:sqlN),
sqIN取值從0到100,0表是完全透明，100表示完全不透明。
FF與IE這兩大類瀏覽器對透明度的支持方式不同，假設(shè)我們要將ID為div1的透明度
設(shè)為30%,怎樣做到兼容呢？
其實很簡單，就是把兩種寫法均寫出來，不支持的那種寫法會被瀏覽器忽略，如：
ftdivl{width:200px;height:200px;background:red;filter:alpha(opacity:30);opacity:0.3;}
下面我們著手來實現(xiàn)淡入淡出功能。
如下圖，div初始透明度為30%,當(dāng)鼠標(biāo)進(jìn)入后，透明度值逐漸變?yōu)?00%,鼠標(biāo)移出后
逐漸還原為30%。
在JS里，運動不只是位置的變化，這種透明度的變化也可用我們前面介紹的運動框架
來完成，所以這也是一種運動。
在前邊所做的“分享到”實例中，因在JS里有。ffsetLeft屬性讓我們能很方便地獲得元
素的位置，所以實現(xiàn)運動功能就變得容易一些，而透明度，在JS里是沒有。ffsetAlpha這屬
性的，也就是說我們是不能像位置那樣去直接獲取與設(shè)置了。
在這里，我們應(yīng)用了程序設(shè)計的一個重要思想，就是把一些要表現(xiàn)的東西，用一些變量
來存取，把要進(jìn)行的操作轉(zhuǎn)換成對變量的操作，從而達(dá)到控制的目的。
我們定義一個全局變量varalpha=3O;其初值為30,表示透明度，如果鼠標(biāo)是移入，我們
讓其值變大，然后賦給div；如果是鼠標(biāo)移出，讓其值變小，再賦給div。也就是通過一個中
間變量來模擬透明度，存取該變量的值從而操作透明度，其完整代碼如下：
<(DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>無標(biāo)題文檔
<style>
#divl{width:200px;height:200px;background:red;filter:alpha(opacity:30);opacity:。.3;}
</style>
<script>
window.onload=function()
(
varoDiv=document.getElementByld('divl');
oDiv.onmouseover=function()
(
startMove(lOO);
)；
oDiv.onmouseout=function()
(
startMove(30);
)；
)；
varalpha=30;
vartimer=null;
functionstartMove(iTarget)
(
varoDiv=document.getElementByld('divl,);
clearlnterval(timer);
timer=setlnterval(function(){
varspeed=0;
if(alpha<iTarget)
speed=10;
else
speed=-10;
)
if(alpha==iTarget)
(
clearlnterval(timer);
}
else
(
alpha+=speed;
oDiv.style.filter='alpha(opacity:'+alpha+')'；
oDiv.style.opacity=alpha/100;
)
),30);
)
</script>
</head>
<body>
<divid="divl"x/div>
</body>
</html>
三、緩沖運動
1、緩沖運動基本
前面所講的運動是勻速運動，緩沖運動是變速運動，像拉伸或壓縮的彈簧被釋放后一樣,
是先快后慢。彈簧產(chǎn)生這種運動是因彈簧的形變在改變，其彈力在不斷變小，加速度不斷變
小，所以會先快后慢。在JS里我們用一變化的變量來代替速度，讓它先大后小，最后為零，
就模擬出緩沖了。
一個元素要從一個初始位置到一個目標(biāo)位置，起初時的距離較遠(yuǎn)，我們讓其速度較大，
隨著距離越來越近，我們讓其速度越來越小，到達(dá)目標(biāo)位置時速度為零，這樣展現(xiàn)出來的就
是緩沖運動了。
速度的大小跟距離有關(guān)，距離大速度就大，距離小速度就小，換句話說，速度與距離成
正比。
假設(shè)一個div要運動到300處，這個300就是目標(biāo)位置，div在運動中的位置即當(dāng)前位
置是在不斷變化的，我們可用JS里。ffsetLeft來取得，假設(shè)div元素存儲在oDiv變量里，那
么oDiv.offsetLeft就是這個div運動過程中的當(dāng)前位置，表達(dá)式300-oDiv.offsetLeft的值就會
越來越小，能否就用它來當(dāng)作速度呢：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔
<style>
#divl{width:100px;height:100px;background:red;position:absolute;left:O;top:50px;}
</style>
<script>
functionstartMove()
(
varoDiv=document.getElementByld('divl');
setlnterval(function(){
varspeed=300-oDiv.offsetLeft;
oDiv.style.left=oDiv.offsetLeft+speed+'px';
},30);
)
</script>
</head>
<body>
<inputtype="button"value="開始運動"onclick="startMove()"/>
<divid="divl">
</div>
</body>
</html>
運行程序，當(dāng)我們一單擊“開始運動”按鈕，一瞬間，紅色塊就到達(dá)了目的地。
開始時,div的left值為0.oDiv.offsetLeft也就等于0,那么300-oDiv.offsetLeft就等于
300,即速度值就為其距離值，所以定時器一啟動，在第一個30毫秒內(nèi)就把它直接移到目標(biāo)
位置了。
知道原因了，解決也就簡單了，我們可以取這個差值的幾分之幾作為速度值即可解決這
個問題，比如將varspeed=300-oDiv.offsetLeft;這句改成varspeed=(300-oDiv.offsetLeft)/10;
經(jīng)此一改后，再運行程序，運動緩沖起來了，達(dá)到我們的目的了。但程序設(shè)計不能到此
就完事了，我們還要看有沒有bug。
我們布局上，增加一個div,位置在目標(biāo)位置300處，其寬度為lpx,高度為300px,看
起來就是一條線：
#div2{width:lpx;height:300px;positiomabsolute;left:300px;top:0;background:black;}
開始運動
程序運行后如下圖所示:
開始運動
那個紅色塊并沒有到達(dá)300處。
如果我們在JS中增力「一句:document.title=oDiv.offsetLeft+/+speed;將紅色塊當(dāng)前的左邊
距、速度值作為文檔的標(biāo)題信息顯示出來：
<!DOCTYPEHTML>
<html>
<head>
<metacharset=nutf-8">
無標(biāo)題文檔</title>
<style>
#divl{width:100px;height:100px;background:red;position:absolute;left:O;top:50px;}
#div2{width:lpx;height:300px;position:absolute;left:300px;top:0;background:black;}
</style>
<script>
functionstartMove()
(
varoDiv=document.getElementByld(,divl,);
setlnterval(function(){
varspeed=(300-oDiv.offsetLeft)/10;
oDiv.style.left=oDiv.offsetLeft+speed4-'px';
document.title=oDiv.offsetLeft+7+speed;
),30);
)
</script>
</head>
<body>
<inputtype="button”value二”開始運動"onclick="startMove()"/>
<divid="divl"x/div>
<divid=,,div2"x/div>
</body>
</html>
上圖為在chrome中運行情況，從標(biāo)題文字信息可看出此時div的左邊距為296,速度
為0.4。
上圖為在IE中運行情況，從標(biāo)題文字信息可看出此時div的左邊距為291,速度為0.9。
雖然這兩大類瀏覽器的計算結(jié)果不一致，但都沒有準(zhǔn)確地運動到300處。
下面我們以IE為例來探討為什么會停在291處。
像素ipx,是屏幕顯示時的最小單位。如果我們把樣式寫成left:291.9px,瀏覽器會直接
把后面的小數(shù)忽略掉定為291,也就是說，當(dāng)div運行到291處時，它與目標(biāo)點300之間的
距離為9,varspeed=(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。的方法正好能用在這里，解決這個問題。
向上取整,就是取大于它的最小整數(shù),如：
ceil(3.14)=4；ceil(-1.32)=-l；ceil(-0.998)=0o
向下取整,就是取小于它的最大整數(shù),
$0floor(3.99)=3;floor(-1.32)=-2;floor(-0.998)=-lo
我們在上面的JS代碼中增加一句：
<script>
functionstartMove()
varoDiv=document.getElementByld(*divl');
setlnterval(function(){
varspeed=(300-oDiv.offsetLeft)/10;
speed=Math,ceil(speed);
oDiv.style.left=oDiv.offsetLeft+speed+'px';
document.title=oDiv.offsetLeft+7+speed;
},30);
)
</script>
再次運行，就可解決那個問題了：
?詞收藏夾，電300,0
當(dāng)speed=0.9時,speed=Math.ceil(speed)后speed=l,div將向前運動Ipx,左邊距變?yōu)?/p>
292,下一循環(huán)時，speed=0.8,ceil后仍為1,div又向前移動lpx,左邊距變?yōu)?93,如此循
環(huán)直到300,速度為。時停止。
但這一改進(jìn)，只適用于從左往右運動這種情況。如果我們把div的left的值由0變?yōu)?00：
#divl{width:100px;height:100px;background:red;position:absolute;left:600px;top:50px;},其
它不變，再運行：
這是初始狀態(tài)
這是程序運動后的結(jié)果
那個紅色塊又不能準(zhǔn)確到達(dá)300位置。
因現(xiàn)在的初始位置在600處，比目標(biāo)位置大，移動過程中的當(dāng)前位置均比目標(biāo)位置大,
由varspeed=(300-oDiv.offsetLeft)/10計算出來的速度值為負(fù)值，那么
oDiv.style」eft=oDiv.offsetLeft+speed+'px'將會使它的左邊距值不斷減小，即向左移動，然而在
這句之前的向上取整speed=Math.ceil(speed)會出現(xiàn)ceil(-0.9)=0,所以它會停在309處。此時
我們將speed=Math.ceil(speed)改成speed=Math.floor(speed);向下取整，使其floor(-0.9)=-l即
解決此問題。
我們在程序中使用一判斷語句，如果速度為正，則向上取整，反之向下取整，那么我們
就可以用一套程序完成兩套程序才能完成的事情，就可大大增強程序的通用性了：
<script>
functionstartMove()
varoDiv=document.getElementByld('divl');
setlnterval(function(){
varspeed=(300-oDiv.offsetLeft)/10;
//speed=Math.floor(speed);
speed=speed>0?Math.ceil(speed):Math.floor(speed);
oDiv.style.left=oDiv.offsetLeft+speed+'px';
document.title=oDiv.offsetLeft+7+speed;
},30);
)
</script>
2、緩沖運動實例
(l)onscroll事件及scrollTop屬性
html里面的事件中,onscroll是滾動條在滾動時觸發(fā)的事件。
為窗口添加滾動條事件其實非常的簡單，window.onscroll=function(){};
對于滾動條有兩個重要的屬性scrollLeft與scrollTop.
scrollLeft屬性是設(shè)置或獲取位于滾動條對象左邊界和窗口中目前可見內(nèi)容的最左端
之間的距離。
scrollTop屬性是設(shè)置或獲取位于滾動條對象最頂端和窗口中可見內(nèi)容的最頂端之間
的距離。
各瀏覽器下scrollTop的差異
IE6/7/8:
對于沒有doctype聲明的頁面里可以使用document.body.scrollTop來獲取
scrollTop高度；
又寸于有doctype聲明的頁面貝U可以使用document.documentElement.scrollTop;
Safari:
safari匕戢特別，有自己獲取scrollTop的函數(shù)：window.pageYOffset;
Firefox:
火狐等等相對標(biāo)準(zhǔn)些的瀏覽器就省心多了，直接用
document.document^lement.scrollTop;
綜上情況,完美獲取scrollTop的賦值短語是：
varscrollTop=document.documentElement.scrollTop||window.pageYOffset||
document.body.scrollTop;
scrollTop到底是什么，下面我們用實例來說明。
有些情況下，“元素中內(nèi)容”的高度會超過“元素本身”的高度，下面的演示中，外層元素的
高度值是200px,內(nèi)層元素的高度值是300px。很明顯，“外層元素中的內(nèi)容”高過了“外層元
素”本身.當(dāng)向下拖動滾動條時，有部分內(nèi)容會隱沒在“外層元素的上邊界”之外，scrollTop就
等于這部分“不可見的內(nèi)容”的高度。
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/htmI;charset=utf-8">
無標(biāo)題文檔
</head>
<body>
<divstyle="width:200px;height:200px;background-color:#999999;overflow:auto;"id="
外層元素">
<divstyle="width:100px;height:300px;background-color:#FFFF00;"id="內(nèi)層元素
,>>
這些文字顯示在內(nèi)層元素中。
</div>
</div>
</body>
</html>
解釋：內(nèi)層元素的高度值300px>外層元素的高度值200Px，因此“外層元素的內(nèi)容”（也
就是“內(nèi)層元素”）無法完全顯示，而外層元素把overflow設(shè)置為aut。，因此外層元素的右側(cè)
會出現(xiàn)一個上下方向的滑動條。
初始狀態(tài)下，“內(nèi)層元素的上邊界”和“外層元素的上邊界”重合，沒有任何內(nèi)容超過“外層
元素的上邊界”，此時scrollTop屬性的值為0。
當(dāng)向下拖動滾動條時，超過“外層元素的上邊界”的內(nèi)容會逐漸增多，scrollTop值就等于
這些超出的部分。當(dāng)拖動滾動條到最底部時，“內(nèi)層元素的下邊界”和“外層元素的下邊界”
重合，超過“外層元素的上邊界”的內(nèi)容的高度=300px-200Px=100px,這也就是此時的
scrollTop值。
注意：scrollTop的使用方式是element.scrollTop,而不是element.style.scrollTop
在下面的演示實例中，拖動滾動條的過程中，會讀取此時的scrollTop的值，并在下方
文字中顯示出來：
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/htmI;charset=utf-8">
無標(biāo)題文檔
</head>
<body>
<divstyle="width:200px;height:200px;background-color:#999999;overflow:auto;"
id="outer">
<divstyle="width:100px;height:300px;background-color:#FFFF00;nid=,,insideu>
這些文字顯示在內(nèi)層元素中。
</div>
</div>
<p>scrollTop值是：<spanid="spa"x/spanx/p>
<scripttype="text/javascript">
varouterdiv=document.getElementByld("outer");
outerdiv.onscroll=readScr;
〃〃注冊。nscroll事件處理函數(shù)。當(dāng)拖動滾動條時，會產(chǎn)生onscroll事件
varoSpa=document.getElementByld("spa");
//onscroll事件的處理函數(shù)
functionreadScr()
(
oSpa.innerHTML=outerdiv.scrollTop;
〃讀取“外層元素”此時的scrollTop的值并顯示出來
)
readScr();
〃頁面加載完成后，執(zhí)行一次此函數(shù)。顯示最初的scrollTop值，此時的值為0
</script>
</body>
</html>
這些文字顯示
在內(nèi)層元素
中O
scrollTop值是：0scrollTop值是：100
解釋：當(dāng)拖動“外層元素的滾動條”時，會產(chǎn)生onscroll事件。為這個事件注冊一個名為
readScr的處理函數(shù)，在readScr這個事件處理函數(shù)中，通過outerdiv.scrollTop得到"外層元
素”當(dāng)時的scrollTop的值，并顯示在頁面上。
(2)關(guān)于clientHeight>offsetHeight>scrollHeight
我們這里說說四種瀏覽器對document.body的clientHeight>offsetHeight和
scrollHeight的解釋。
這四種瀏覽器分別為IE(InternetExplorer)、NS(Netscape)、Opera>FF(FireFox)o
clientHeight
大家對clientHeight都沒有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏
覽器中可以看到內(nèi)容的這個區(qū)域的高度，一般是最后一個工具條以下到狀態(tài)欄以上的這個區(qū)
域，與頁面內(nèi)容無關(guān)。
offsetHeight
IE>Opera認(rèn)為offsetHeight=clientHeight+滾動條+邊框。
NS、FF認(rèn)為offsetHeight是網(wǎng)頁內(nèi)容實際高度,可以小于clientHeighto
scrollHeight
IE>Opera認(rèn)為scrollHeight是網(wǎng)頁內(nèi)容實際高度,可以小于clientHeighto
NS>FF認(rèn)為scrollHeight是網(wǎng)頁內(nèi)容高度,不過最小值是clientHeighto
簡單地說clientHeight就是透過瀏覽器看內(nèi)容的這個區(qū)域高度。
NS>FF認(rèn)為offsetHeight和scrollHeight都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度
小于等于clientHeight時，scrollHeight的值是clientHeight,而offsetHeight可以小于
clientHeighto
IE、Opera認(rèn)為offsetHeight是可視區(qū)域clientHeight滾動條加邊框。scrollHeight則是
網(wǎng)頁內(nèi)容實際高度。
RSclientwidth>offsetwidth和scrollwidth的解釋與上面相同，只是把高度換成寬度
即可。
clientHeight與offsetHeight的區(qū)別
許多文章已經(jīng)介紹了clientHeight和offsetHeight的區(qū)別，就是clientHeight的值不包括
scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而,clientHeight和offsetHeight
的值到底由什么組成的呢？如何計算這兩個數(shù)的值？
pbody.clientTop
div.clientLeft
div.offsetLeft
body.dientLeft
div.style.left
div.style.padding
div.style.border
body.style.padding
body.style.border
IE中:
document.body.clientWidth==>BODY對象寬度
document.body.clientHeight==>BODY對象高度
document.documentElement.clientwidth==>可見區(qū)域?qū)挾?/p>
document.documentElement.clientHeight==>可見區(qū)域高度
FireFox中：
document.body.clientWidth==>BODY對象寬度
document.body.clientHeight==>BODY對象高度
document.documentElement.clientwidth==>可見區(qū)域?qū)挾?/p>
document.documentElement.clientHeight==>可見區(qū)域高度
Opera中：
document.body.clientWidth==>可見區(qū)域?qū)挾?/p>
document.body.clientHeight==>可見區(qū)域高度
document.documentElement.clientWidth==>頁面對象寬度（即BODY對象寬度加上
Margin寬）
document.document日ement.clientHeight==>頁面對象高度（即BODY對象高度加上
Margin高）
沒有定義W3c的標(biāo)準(zhǔn)，則
IE為：
document.documentElement.clientWidth==>0
document.documentElement.clientHeight==>0
FireFox為：
document.documentElement.clientWidth==>頁面對象寬度（即BODY對象寬度加上
Margin寬）
document.documentElement.clientHeight==>頁面對象高度（即BODY對象高度加上
Margin高）
Opera為：
document.documentElement.clientWidth==>頁面對象寬度（即BODY對象寬度加上
Margin寬）
document.documentElement.clientHeight==>頁面對象高度（即BODY對象高度加上
Margin高）
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth
網(wǎng)頁可見區(qū)域高：document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth（包括邊線的寬）
網(wǎng)頁可見區(qū)域高：document.body.offsetHeight（包括邊線的高）
網(wǎng)頁正文全文寬：document.body.scrollWidth
網(wǎng)頁正文全文高：document.body.scrollHeight
網(wǎng)頁被卷去的高：document.body.scrollTop
網(wǎng)頁被卷去的左：document.body.scrollLeft
網(wǎng)頁正文部分上：window.screenTop
網(wǎng)頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區(qū)高度：window.screen.availHeight
屏幕可用工作區(qū)寬度：window.screen.availwidth
HTML精確定位：scrollLeftscrollWidth＞clientWidth＞offsetwidth
scrollwidth==＞獲取對象的滾動寬度
scrollHeight==＞獲取對象的滾動高度
scrollLeft==＞設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
（被卷去的左）
scrollTop==＞設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離（被
卷去的高）
offsetLe代==＞獲取對象相對于版面或由offsetparent屬性指定的父坐標(biāo)的計算左側(cè)位
置
offsetTop==＞獲取對象相對于版面或由offsetTop屬性指定的父坐標(biāo)的計算頂端位置
offsetHeight==＞獲取對象相對于版面或由父坐標(biāo)offsetParent屬性指定的父坐標(biāo)的高
度
event.clientX==＞相對文檔的水平座標(biāo)
event.clientY==＞相對文檔的垂直座標(biāo)
event.offsetX==＞相對容器的水平坐標(biāo)
event.offsetY==＞相對容器的垂直坐標(biāo)
document.documentElement.scrollTop==＞垂直方向滾動的值
event.clientX+document.documentElement.scrollTop==＞相對文檔的水平座標(biāo)+垂直方向
滾動的量
以上這些繁雜的內(nèi)容，僅供參考。我們重點掌握將要用到的dientHeight與scrollTop。
(3)右側(cè)懸浮框
如上圖，拖動滾動條時，紅色塊始終懸浮在窗口的右下角。
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔</title>
<style>
#divl{width:100px;height:150px;background:red;position:absolute;right:O;bottom:0;}
</style>
<script>
window.onscroll=function()
varoDiv=document.get日ementByld('divl');
varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;
oDiv.style.top=document.document日ement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
）;
</script>
</head>
<bodystyle="height:2000px;">
<divid="divl"x/div>
</body>
</html>
首先在布局時就給body一個行間樣式設(shè)其高度為2000px：<bodystyle="height:2000px;">
這樣網(wǎng)頁面右邊會出現(xiàn)滾動條。
要懸浮在右下角，必須設(shè)置其定位屬性
divposition:absoluteo
window.onscroll二function（）｛｝是為窗口添力口的滾動事件，當(dāng)我們拖動滾動條時會觸發(fā)此
事件執(zhí)行函數(shù)里的代碼。
varoDiv=document.getElementByld（'div：T）;這句是獲取div元素。
varscrollTop=document.documentElement.scrollTop11document.body.scrollTop;是獲得
scrollTop值。
oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';ii
句中的document.documentElement.clientHeight是頁面可視區(qū)的高度，oDiv.offsetHeight是
div的高度，scrollTop頁面上
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2-Carboxyphenol-d4-Standard-生命科學(xué)試劑-MCE
- 1-Bromo-2-5-pyrrolidinedione-Standard-生命科學(xué)試劑-MCE
- 國際體育賽事與英語學(xué)習(xí)
- 高中英語寫作技巧分享
- 安全駕駛與交通規(guī)則
- （高清版）DB34∕ T 3577-2020 公筷公勺服務(wù)規(guī)范
- 第四關(guān)：標(biāo)點符號 真題解析+習(xí)題演練（含解析）中考語文一輪復(fù)習(xí)知識點闖關(guān)（全國）
- 美術(shù)課的畫畫教學(xué)模板
- 小學(xué)語文新課改實施方案
- 地彈簧門施工方案
- 基礎(chǔ)寫作課件
- 主題班會共建和諧的同學(xué)關(guān)系
- 人教版九年級《一對一防守》說課稿
- 內(nèi)科運用PDCA降低靜脈留置針并發(fā)癥發(fā)生率品管圈成果匯報書
- 部編版八年級道德與法治上冊《法不可違》教案及教學(xué)反思
- 教師赴企業(yè)掛職鍛煉暫行辦法
- 2022-2023學(xué)年浙江省名校協(xié)作體高三（下）月考英語試卷-普通用卷
- 深度保潔技術(shù)協(xié)議
- 第五章不規(guī)則三角網(wǎng)tin的建立
- 2023年反假貨幣測評試題庫大全-下（判斷題匯總）
- Unit4MeetingthemuseStartingOutUnderstandingideas課件-外研版高中英語選擇性
評論
0/150
提交評論