Board logo

標題: [教學] (教學第32篇) Dynamic HTML 上篇 [打印本頁]
作者: 小誌    時間: 2010-5-19 09:33     標題: (教學第32篇) Dynamic HTML 上篇

變更元件位置
對CSS樣式表有些許認識後，我們現在來看看如何透過JavaScript與CSS樣式表來動態改變網頁元件的位置！下例是一個簡易的學習例子：在網頁中有一張圖片，網頁載入時它是靜止的喔！當我們在它身上用滑鼠點擊時，它就會開始移動喔！

[attach]745[/attach]

這太神奇了吧！沒什麼啦！我們只是改變元件的位置而已，在網頁中，我們只要在圖像標籤中加上它的辨別名稱(ID)就可以讓這圖像標籤變成JavaScript可以控制的網頁元件，還有，最重要的一點：我們要利用CSS樣式設定將元件的定位方式！當我們將position定位屬性的值設定為「relative」，則網頁元件的位置將與網頁文件中的其他元件分離而獨立於網頁排版格式之外，但是…元件原始的位置會留下空白，所以我們應該將position定位屬性的值設定為「absolute」，同樣可以將元件獨立於網頁排版格式之外，但元件原始的位置卻不會留下空白喔！
  1. <img src="cssjava.gif" style="position:absolute" id="map" onClick="movemap()">
複製代碼
考你一下：在我們按下滑鼠按鍵時會產生什麼事件？沒錯！是「敲擊」事件！我們不是要在敲擊圖片時要讓圖片移動嗎？所以，在圖像標籤中我們就再加上一個OnClick事件控制器，讓圖片被敲擊時利用OnClick事件控制器來呼叫我們移動圖片的movemap()函式！
  1. function movemap()
  2. {
  3.   step+=3
  4.   document.all.map.style.top = step+"px"
  5.   setTimeout("movemap()",speed)
  6. }
複製代碼
在movemap()函式中，step變數是用來決定圖片的位置，函式每執行一次，step變數值就加3，而step變數的值就是用來決定圖片元件的位置，注意喔！當我們指定圖片位置時，位置top的屬性值單位是像素喔！所以，在我們定位置的時候別忘了要串接上單位「px」（上表程式碼第四行）。接著我們再使用定時器setTimeout()函式重複執行改變圖片位置的敘述來連續移動圖片。
moveA.htm
  1. <html>
  2. <head>
  3. <title>移動元件</title>

  5. <script language="JavaScript">
  6. //設定移動距離的步進值變數
  7. step=0
  8. //設定移動的變換時間
  9. speed=500
  10. //移動圖片元件的函式
  11. function movemap()
  12. {
  13. //每次移動三個單位
  14.   step+=3
  15. //改變圖片元件位置
  16.   document.all.map.style.top = step+"px"
  17. //連續呼叫函式持續移動圖片位置
  18.   setTimeout("movemap()",speed)
  19. }
  20. </script>

  22. </head>
  23. <body>

  25. <img src="cssjava.gif" style="position:absolute" id="map" onClick="movemap()">

  27. </body>
  28. </html>
複製代碼
喂！小誌ㄚ，圖片它一直往下跑不停了啦！怎麼辦？喔！這是因為我們沒有訂定圖片位置移動的終點啦！沒關係！接著往下看，我們再來實做一下，這次不要再讓圖片往下跑，我們讓它由左向右跑！而且到文件視窗邊緣就讓它停下來。

[attach]746[/attach]

在本例中，圖片會從網頁左方向右移動至網頁百分之百寬度的地方停住，當你開啟範例檔案並在圖片上按下滑鼠按鍵時，圖片是會向右移動，但是移動的模樣很不滑順自然，所以，你在程式設計的時候就要記得改變相關的變數設定值（移動的位置與切換位置的時間），讓圖片的移動就如同你在看卡通一般的流暢。

moveB.htm(圖片移動函式部分程式碼)
  1. <script language="JavaScript">
  2. //設定移動距離的步進值變數
  3. step=0
  4. //設定圖片移動的右邊界百分比
  5. inside=100
  6. //設定移動的變換時間
  7. speed=500
  8. //移動圖片元件的函式
  9. function movemapright()
  10. {
  11. //每次移動三個單位
  12.   step+=3
  13. //改變圖片元件位置
  14. if (step<=inside)
  15. {
  16. document.all.map.style.left = step+"%"
  17. //連續呼叫函式持續移動圖片位置
  18.   setTimeout("movemapright()",speed)
  19. }
  20. }
  21. </script>
複製代碼
看到上表這段讓圖片由左向右移動的程式碼，你可以發現：


研究：
我們是定了圖片移動的終止值，問題是：圖片移到視窗右邊停下來，可是只看到尾巴ㄚ，怎會這樣？我們不是設定圖片的位置不可超過邊界嗎？

[attach]747[/attach]

首先，我們必須了解元件位置屬性「top」與「left」定義，「top」與「left」是指元件左上角的座標位置！「top」代表垂直軸也就是Y軸的座標位置；「left」代表水平軸也就是x軸的座標位置！

在上例中，你之所以只看到圖片的尾巴，那正是因為圖片的左上角位置代表點並沒有超過我們設的範圍ㄚ！那你一定會說：不就把左邊界定為100%，改訂為90%就行了！呵，少來，你怎知道那少的10%剛好是圖片的寬度？所以，最好的辦法就是不要以百分比的方式來定位置，直接用「像素」的方式來做！你可以參考範例moveA.htm，不過你不要「訐譙」小誌喔！因為小誌是預設圖片向右移動600個像素，萬一視窗根本就沒600個像素寬，那你恐怕連圖片尾巴都看不到！別急著罵小誌！繼續往下一節看下去！

[attach]748[/attach]
作者: 小誌    時間: 2010-5-19 09:36

網頁文件的範圍
所謂網頁文件的範圍就是指：在瀏覽器中網頁文件可以呈現內容的區域（client），當瀏覽器縮放時這可以呈現內容的區域（client）也會跟著變大或縮小！要取得工作中瀏覽器的網頁文件可呈現內容的區域寬度跟高度我們可以利用document物件的兩種屬性：

屬性

作用

document.body.clientWidth

網頁文件可呈現內容的區域寬度

document.body.clientHeight

網頁文件可呈現內容的區域高度


注意：兩者屬性的單位都是像素，但是，所取得的屬性值是一個數值。


知道如何取得網頁文件可呈現內容的區域寬度跟高度後我們就可以順利地完成，讓圖片停在我們看的見全貌的網頁文件位置了嗎？當然不行！你忘了網頁元件的位置屬性「top」與「left」定義了吧！所以，圖片要停止的位置應該是：
  1. //向右移的邊界
  2. document.body.clientWidth - document.all.map.width
  3. //向下移的邊界
  4. document.body.clientHeight - document.all.map.height
複製代碼
注意看下圖，水平與垂直的捲動軸都沒作用喔！

[attach]749[/attach]
  1. <html>
  2. <head>
  3. <title>移動元件</title>

  5. <script language="JavaScript">
  6. //預設動距離的步進值變數
  7. step=0
  8. //設定移動的變換時間
  9. speed=100
  10. //移動圖片元件的函式
  11. function movemapright()
  12. {
  13. //每次移動五個單位
  14.   step+=5
  15. //決定圖片移動的停止邊界
  16. inside=document.body.clientWidth - document.all.map.width
  17. //改變圖片元件位置
  18. if (step<=inside)
  19. {
  20. document.all.map.style.left = step+"px"
  21. //連續呼叫函式持續移動圖片位置
  22.   setTimeout("movemapright()",speed)
  23. }
  24. }
  25. </script>

  27. </head>
  28. <body>

  30. <img src="cssjava.gif" style="position:absolute" id="map" onClick="movemapright()">

  32. </body>
  33. </html>
複製代碼
作者: 小誌    時間: 2010-5-19 09:39

元件位置的單位
我們之前在定義網頁元件的位置是利用「top」與「left」的屬性來設定，而這兩種屬性值的設定，我們又必須加上單位像素(px)或百分比(%)，這樣會不會麻煩了一點ㄚ？！現在就再來告訴你定義網頁元件的位置的另外兩個屬性「pixelTop」與「pixelLeft」，這兩個屬性同樣式來定義網頁元件的垂直與水平位置，不同的是當我們設定其屬性值時，不必加上’單位’，因為它們預設的屬性值單位就是「像素」，我們只要直接指定數值就行了，是不是方便多了！


實例學習：
現在我們來實際利用「pixelTop」與「pixelLeft」屬性來撰寫一個在網頁中自由漂浮移動的圖片，當圖片在移動的同時，若碰撞到網頁的四個邊界時將會自動轉向！

[attach]750[/attach]
  1. <HTML>
  2. <HEAD>
  3. </HEAD>
  4. <SCRIPT language="JavaScript">

  6. x = 5 //水平移動距離
  7. y = 5 //垂直移動距離
  8. change = 10 //移動切換時間,越大越慢

  10. function move()
  11. {
  12. //將圖片往下及向右移動一個預設距離
  13. document.all.map.style.pixelLeft+=x
  14. document.all.map.style.pixelTop+=y
  15. //記錄圖片目前位置
  16. postop=document.all.map.style.pixelTop
  17. posleft=document.all.map.style.pixelLeft
  18. //如果圖片的水平方向位置超過網頁文件水平區域
  19. //則將水平移動方向對調,即將水平移動距離變成負值
  20. if(posleft >= document.body.clientWidth)
  21. {x = -x}
  22. //如果圖片的垂直方向位置超過網頁文件垂直區域
  23. //則將垂直移動方向對調,即將垂直移動距離變成負值
  24. if(postop >= document.body.clientHeight)
  25. {y = -y}
  26. //如果圖片的水平方向位置沒有超過網頁文件水平區域
  27. //將水平移動距離同樣維持為預設距離5
  28. if(posleft <= 0)
  29. {x = 5}
  30. //如果圖片的垂直方向位置沒有超過網頁文件垂直區域
  31. //將垂直移動距離同樣維持為預設距離5
  32. if(postop <= 0)
  33. {y = 5}
  34. //連續呼叫函式持續移動圖片位置
  35. setTimeout("move()", change)
  36. }
  37. </SCRIPT>
  38. <!--網頁載入時,立即呼叫函式來移動圖片-->
  39. <BODY onload="setTimeout('move()', 10)">
  40. <!--定義圖片屬性-->
  41. <img src="test.gif" alt="游移的圖片" id="map" style="position: absolute">
  42. </BODY>
  43. </HTML>
複製代碼
原理很簡單，當圖片的上邊界位置或左邊界位置超過網頁文件的邊界寬度時，或者是等於網頁文件的邊界寬度時，我們就讓圖片往反方向移動，如何反方向移動？就直接把正的移動距離設為負的就行了！本來是往前走，移動距離設為負的就變成倒著走囉。如果倒退走時，圖片的上邊界位置或左邊界位置變成了負值或剛好等於零，那就再將移動距離設為正的，讓圖片恢復正向移動。

當你開啟這個範例網頁時，你會發現：瀏覽視窗的水平與垂直的捲動軸，會隨著圖片的碰撞而時時出現，同時圖片也會出界耶！別跟小誌說不知道是什麼原因喔！前面章節已經解釋過了喔，這個問題就當作是練習題，讓聰明的你來解決吧！
[attach]751[/attach]



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)