《JavaScript項(xiàng)目式實(shí)例教程》項(xiàng)目九 運(yùn)動(dòng)基礎(chǔ) -滑動(dòng)的側(cè)邊欄_第1頁(yè)
《JavaScript項(xiàng)目式實(shí)例教程》項(xiàng)目九 運(yùn)動(dòng)基礎(chǔ) -滑動(dòng)的側(cè)邊欄_第2頁(yè)
《JavaScript項(xiàng)目式實(shí)例教程》項(xiàng)目九 運(yùn)動(dòng)基礎(chǔ) -滑動(dòng)的側(cè)邊欄_第3頁(yè)
《JavaScript項(xiàng)目式實(shí)例教程》項(xiàng)目九 運(yùn)動(dòng)基礎(chǔ) -滑動(dòng)的側(cè)邊欄_第4頁(yè)
《JavaScript項(xiàng)目式實(shí)例教程》項(xiàng)目九 運(yùn)動(dòng)基礎(chǔ) -滑動(dòng)的側(cè)邊欄_第5頁(yè)
已閱讀5頁(yè)，還剩19頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

項(xiàng)目九運(yùn)動(dòng)基礎(chǔ)——滑動(dòng)的側(cè)邊欄如圖9.1所示，頁(yè)面窗口左邊緣有一個(gè)“分享欄”，當(dāng)鼠標(biāo)放置到“分享欄”上時(shí)，該側(cè)邊欄從窗口左邊緣由快到慢緩沖運(yùn)動(dòng)拉出（如圖9.2所示）；當(dāng)鼠標(biāo)從“分享欄”或者灰色區(qū)域移出時(shí)，該側(cè)邊欄由快到慢緩沖運(yùn)動(dòng)縮進(jìn)至頁(yè)面窗口左邊緣為如圖9.1所示的狀態(tài)。當(dāng)滾動(dòng)鼠標(biāo)滾輪或者拖動(dòng)頁(yè)面窗口右側(cè)滾動(dòng)條時(shí)，該側(cè)邊欄也與滾動(dòng)條同向快到慢緩沖運(yùn)動(dòng)并停止在頁(yè)面窗口可視區(qū)域的左邊緣垂直居中的位置。項(xiàng)目情境

圖9.1側(cè)邊欄縮進(jìn)狀態(tài)圖9.2側(cè)邊欄拉出狀態(tài)掌握物理運(yùn)動(dòng)的基本規(guī)律。掌握緩沖運(yùn)動(dòng)的原理和實(shí)現(xiàn)方法。掌握窗口滾動(dòng)事件。學(xué)習(xí)目標(biāo)如圖9.3所示，在起始位置后面的文本框中輸入一個(gè)數(shù)字代表紅色方塊運(yùn)動(dòng)開始時(shí)離頁(yè)面窗口左邊緣的位置；當(dāng)點(diǎn)擊“運(yùn)動(dòng)”按鈕，紅色方塊就從文本框中輸入的數(shù)字對(duì)應(yīng)的位置處開始由快到慢緩沖運(yùn)動(dòng)，最后停止在如圖9.4所示的位置處，紅色方塊的左邊緣與黑色豎線正好對(duì)齊。任務(wù)1緩沖運(yùn)動(dòng)圖9.3開始位置圖9.4停止位置1、ceil()函數(shù)ceil()函數(shù)是Math數(shù)學(xué)對(duì)象的一個(gè)方法，其作用是對(duì)一個(gè)數(shù)進(jìn)行向上取整。例如：Math.ceil(3.24)//值為4Math.ceil(-3.24)//值為-32、floor()函數(shù)floor()函數(shù)是Math數(shù)學(xué)對(duì)象的一個(gè)方法，其作用是對(duì)一個(gè)數(shù)進(jìn)行向下取整。例如：Math.floor(3.24)//值為3Math.floor(-3.24)//值為-4【相關(guān)知識(shí)】1、ceil()函數(shù)ceil()函數(shù)是Math數(shù)學(xué)對(duì)象的一個(gè)方法，其作用是對(duì)一個(gè)數(shù)進(jìn)行向上取整。例如：Math.ceil(3.24)//值為4Math.ceil(-3.24)//值為-32、floor()函數(shù)floor()函數(shù)是Math數(shù)學(xué)對(duì)象的一個(gè)方法，其作用是對(duì)一個(gè)數(shù)進(jìn)行向下取整。例如：Math.floor(3.24)//值為3Math.floor(-3.24)//值為-4【相關(guān)知識(shí)】3、緩沖運(yùn)動(dòng)緩沖運(yùn)動(dòng)不同于勻速運(yùn)動(dòng)，它是指物體由快到慢再到停止的運(yùn)動(dòng)，運(yùn)動(dòng)看上去具有一定的加速度。假設(shè)對(duì)象div1在目標(biāo)位置的左側(cè)，運(yùn)動(dòng)的速度為iSpeed，對(duì)象的目標(biāo)位置是targetPos.1）如果div1的初始位置在目標(biāo)位置的左側(cè)，實(shí)現(xiàn)緩沖運(yùn)動(dòng)的函數(shù)為：functionfn(){ variSpeed=Math.ceil((targetPos-div1.offsetLeft)/8); div1.style.left=div1.offsetLeft+iSpeed+"px";}window.setInterval(fn,30);【相關(guān)知識(shí)】2）如果div1的初始位置在目標(biāo)位置的右側(cè)，實(shí)現(xiàn)緩沖運(yùn)動(dòng)的函數(shù)為：functionfn(){ variSpeed=Math.floor((targetPos-div1.offsetLeft)/8); div1.style.left=div1.offsetLeft+iSpeed+"px";}window.setInterval(fn,30);【相關(guān)知識(shí)】1、在<body>標(biāo)簽內(nèi)部輸入以下代碼，創(chuàng)建一個(gè)用于做緩沖運(yùn)動(dòng)的DIV，一個(gè)用于填寫DIV初始位置的文本框，一個(gè)“運(yùn)動(dòng)”按鈕，一個(gè)span標(biāo)簽用于標(biāo)識(shí)目標(biāo)位置。<body>起始位置：<inputtype="text"id="startPos"size="5"/><inputtype="button"id="btnMove"value="運(yùn)動(dòng)"/><divid="div1"></div><spanid="span1"></span></body>【任務(wù)實(shí)現(xiàn)】2、在<head>標(biāo)簽對(duì)中輸入以下樣式表代碼，其中，為了用span標(biāo)識(shí)目標(biāo)位置，讓其顯示為一條黑色的豎線。<styletype="text/css">#div1{width:100px;height:100px;background-color:#C30;position:absolute;left:0px;}#span1{width:1px;height:150px;background-color:#000;position:absolute;left:250px;}</style>【任務(wù)實(shí)現(xiàn)】<scripttype="text/javascript">window.onload=function(){ vardiv1=document.getElementById("div1"); varbtnMove=document.getElementById("btnMove"); varspan1=document.getElementById("span1"); varstartPos=document.getElementById("startPos"); vartimer; vartargetPos=span1.offsetLeft; functionmoveDiv() { variSpeed; if(div1.offsetLeft<targetPos) { iSpeed=Math.ceil((targetPos-div1.offsetLeft)/8); } else { iSpeed=Math.floor((targetPos-div1.offsetLeft)/8); } div1.style.left=div1.offsetLeft+iSpeed+"px"; }

【任務(wù)實(shí)現(xiàn)】 btnMove.onclick=function() { window.clearInterval(timer); div1.style.left=startPos.value+"px"; timer=window.setInterval(moveDiv,30); } }</script>3、在<head>標(biāo)簽對(duì)中輸入以下代碼：如圖9.5所示，在瀏覽器窗口的左邊緣有一個(gè)紅色方塊，當(dāng)用鼠標(biāo)滾動(dòng)頁(yè)面文檔的垂直滾動(dòng)條時(shí)，方塊與滾動(dòng)條同向垂直緩沖滾動(dòng)并停在頁(yè)面文檔左邊緣中間位置。任務(wù)2垂直滾動(dòng)緩沖跟隨圖9.5垂直滾動(dòng)緩動(dòng)跟隨1、scrollTop屬性scrollTop屬性的用法為：document.body.scrollTop或者document.documentElement.scrollTop該屬性為只讀，不能對(duì)其賦值，表示頁(yè)面被卷去的高，值為一個(gè)整型的數(shù)。如圖9.6所示?！鞠嚓P(guān)知識(shí)】圖9.6scrollTop2、scrollLeft屬性scrollLeft屬性的用法為：document.body.scrollLeft或者document.documentElement.scrollLeft該屬性為只讀，不能對(duì)其賦值，表示頁(yè)面被卷去的左，值為一個(gè)整型的數(shù)。如圖9.7所示。【相關(guān)知識(shí)】圖9.7scrollLeft本任務(wù)與任務(wù)一類似，關(guān)鍵問題是如何取得紅色方塊最終停止的位置。如圖9.8所示，div1最終停止在頁(yè)面文檔可視區(qū)域垂直居中的位置。那么紅色方塊最終停止的位置targetPos的值為：targetPos=scrollTop+(docClientHeight-div1.offsetHeight)/2【任務(wù)分析】圖9.8div1最終停止的位置1、在<body>標(biāo)簽內(nèi)部輸入以下代碼，創(chuàng)建一個(gè)DIV。<body><divid="div1"></div></body>2、在<head>標(biāo)簽對(duì)中輸入以下樣式表代碼。為了使得頁(yè)面文檔產(chǎn)生垂直滾動(dòng)條，設(shè)置body的高度為一個(gè)較大的值。

<styletype="text/css">body{height:1000px;}div{width:100px;height:100px;background-color:#C30;position:absolute;left:0px;}</style>【任務(wù)實(shí)現(xiàn)】3、在<head>標(biāo)簽對(duì)中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ vardiv1=document.getElementById("div1"); vartimer; window.onscroll=function() { varscrollTop=document.documentElement.scrollTop||document.body.scrollTop; vardocClientHeight=document.documentElement.clientHeight||document.body.clientHeight; vartargetPos=scrollTop+(docClientHeight-div1.offsetHeight)/2; targetPos=parseInt(targetPos);//取整防止div停下時(shí)發(fā)生上下抖動(dòng)的情況

functionmoveDiv() { variSpeed=(targetPos-div1.offsetTop)/8; iSpeed=div1.offsetLeft<targetPos?Math.ceil(iSpeed):Math.floor(iSpeed); div1.style.top=div1.offsetTop+iSpeed+"px"; } window.clearInterval(timer); timer=window.setInterval(moveDiv,30); }}</script>【任務(wù)實(shí)現(xiàn)】任務(wù)3“項(xiàng)目九”的實(shí)現(xiàn)在setInterval中調(diào)用帶參數(shù)的函數(shù)如果setInterval函數(shù)調(diào)用帶參數(shù)的函數(shù)，該函數(shù)不能包含在任何事件觸發(fā)函數(shù)之內(nèi)。【相關(guān)知識(shí)】在本項(xiàng)目中，“分享欄”有兩個(gè)方向的緩沖運(yùn)動(dòng)。一個(gè)方向是當(dāng)鼠標(biāo)懸停或者離開“分享欄”時(shí)，“分享欄”左右橫向移出或移進(jìn)瀏覽器窗口左邊緣；另一個(gè)方向是當(dāng)鼠標(biāo)滾動(dòng)瀏覽器的垂直滾動(dòng)條時(shí)，“分享欄”上下移動(dòng)到頁(yè)面文檔垂直居中的位置。我們可以定義一個(gè)函數(shù)用于處理這兩個(gè)方向的緩沖運(yùn)動(dòng)。由于“分享欄”在兩個(gè)方向做緩沖運(yùn)動(dòng)時(shí)停止的目標(biāo)位置不同，所以，該函數(shù)需要兩個(gè)參數(shù)，一個(gè)參數(shù)接收目標(biāo)位置，另一個(gè)參數(shù)接收運(yùn)動(dòng)方向?！救蝿?wù)分析】1、在<body>標(biāo)簽對(duì)中建立一對(duì)父子DIV對(duì)象。父DIV表示“分享欄”灰色部分，子DIV表示“分享欄”黃色標(biāo)簽部分。代碼如下：<body><divid="div1"> <divid="div2">分享欄</div></div></body>【任務(wù)實(shí)現(xiàn)】2、在<head>標(biāo)簽對(duì)中定義如下CSS樣式表。為了測(cè)試效果，03行將body的高度設(shè)置為1000px這樣瀏覽器就能產(chǎn)生默認(rèn)的滾動(dòng)條，當(dāng)鼠標(biāo)在自定義的滾動(dòng)條上按下鼠標(biāo)滾輪滾動(dòng)時(shí)，瀏覽器默認(rèn)滾動(dòng)條必須不能同時(shí)被滾動(dòng)。代碼如下：<styletype="text/css">body{height:1000px;}#div1{width:100px;height:200px;background-color:#999;position:absolute;left:-100px;}#div2{width:20px;height:100px;background-color:#FC6;position:absolute;left:100px;top:50px;text-align:center;line-height:32px;}</style>【任務(wù)實(shí)現(xiàn)】3、在<head>標(biāo)簽對(duì)中輸入如下代碼：<scripttype="text/javascript">functionmoveDiv(targetPos,moveDir){ variSpeed; if(moveDir==1)//如果是水平緩沖運(yùn)動(dòng)

{ iSpeed=(targetPos-div1.offsetLeft)/8; iSpeed=div1.offsetLeft<targetPos?Math.ceil(iSpeed):Math.floor(iSpeed); div1.style.left=div1.offsetLeft+iSpeed+"px"; } else//如果是垂直緩沖運(yùn)動(dòng)

{ iSpeed=(targetPos-div1.offsetTop)/8; iSpeed=div1.offsetTop<targetPos?Math.ceil(iSpeed):Math.floor(iSpeed); div1.style.top=div1.offsetTop+iSpeed+"px"; }}【任務(wù)實(shí)現(xiàn)】window.onload=function(){ vardiv1=document.getElementById("div1"); vartimer1; div1.onmouseover=function() { window.clearInterval(timer1); varta

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論