返回列表 上一主題 發帖

[教學] (教學第33篇) Dynamic HTML 中篇

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1194 
主題
395 
精華
113 
積分
1747 
點名
0  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2025-4-11 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
1# 跳轉到 » 倒序看帖
打印
tT
發表於 2010-5-19 09:43 | 只看該作者

[教學] (教學第33篇) Dynamic HTML 中篇

固定元件位置
在上一節中，小誌提出「pixelTop」與「pixelLeft」屬性的測量單位作為元件的定位，大家可能還有些疑惑，現在小誌再來說明一下。

我們之所以使用CSS的位置(position)與大小(size) 屬性來做元件控制，是因為這些屬性會將元件的位置與大小數據化，讓我們能更容易瞭解及處理，不過，我們之前所使用過的CSS屬性，如width、height、top、left等，當我們取得這些屬性的值時，其所回應給我們的資料是一組數值加上其單位，也就是說這些屬性的回傳值是一個字串組，例如有一個元件它的寬(width)是30點(point)，那麼我們所得的屬性值將會是「30pt」。

正因為屬性值若是一個字串組，將會使我們在做運算或指定屬性值時變的非常難以處理，例如在範例13-4.htm中，我們透過「left」屬性來設定元件的位置時，除了設定屬性的數值外，還得指定其單位為「px」，所以小誌才會提出「pixelTop」與「pixelLeft」屬性來使用，這兩種屬性都是以「像素」為測量單位，它們的屬性設定與取得都只是「數值」，因此我們在利用這些屬性值做運算或處理就輕鬆多了；除了位置的「pixelTop」與「pixelLeft」屬性外，元件寬度、高度也有為像素單位的屬性：「pixelWidth」與「pixelHeight」。如果「width」的字串屬性值為「30px」，那麼「pixelWidth」的屬性值就是一組數據「30」。

元件的位置與大小還有一種是以「點（point）」為單位的，但是它們的屬性設定與取得也是「數值」，這些屬性是「posTop」、「posLeft」、「posWidth」、「posHeight」。如果「width」的字串屬性值為「30pt」，那麼「posWidth」的屬性值就是一組數據「30」。
收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1194 
主題
395 
精華
113 
積分
1747 
點名
0  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2025-4-11 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
2#
發表於 2010-5-19 09:54 | 只看該作者
捲動軸位置
當我們的網頁文件超過瀏覽器視窗可顯示範圍時，就會在瀏覽器視窗左方出現垂直捲動軸，或在瀏覽器視窗下方出現水平捲動軸，以便我們檢視網頁文件的內容：



當我們移動捲動軸時，會引發onscroll（頁面捲動）事件，要有onscroll事件產生，當然得要有捲動軸可以使用才行！當我們利用捲動軸去改變頁面時，onscroll事件就會發生，在發生onscroll事件時，我們可以依照捲動軸當時所在的位置來改變我們元件的對應位置，捲動軸的位置由兩個屬性來控制與記錄，水平位置是「scrollLeft」屬性，而垂直位置則是「scrollTop」屬性：

屬性

作用

document.body.scrollTop

捲動軸的垂直位置

document.body.scrollLeft

捲動軸的水平位置



當我們使用捲動軸來改變頁面（捲動視窗）時，網頁元件會隨著頁面改變而看不到了，也就是說：元件不會隨著視窗捲動，我們無法將元件的位置固定在視窗中的某個地方，可是有一個某家外國提供免費空間的公司網頁中，有個圖片是會隨著視窗捲動，圖片會一直出現在畫面中ㄚ，沒錯！這樣的效果我們也可以輕易的做到，只要我們利用捲動軸的位置屬性就可以辦到。
  1. <HTML>
  2. <HEAD>
  3. </HEAD>
  4. <SCRIPT language="JavaScript">
  5. //變更元件位置函式
  6. function move()
  7. //利用捲動軸位置改變元件位置
  8. {
  9. document.all.map.style.pixelLeft=document.body.scrollLeft
  10. document.all.map.style.pixelTop=document.body.scrollTop
  11. }

  13. </SCRIPT>
  14. <!--當視窗捲動時呼叫函式變更元件位置-->
  15. <BODY onScroll="move()">

  17. <img src="test.gif" alt="游移的圖片" id="map" style="position: absolute">

  19. </BODY>
  20. </HTML>
複製代碼

  • 在本例中，我們將圖片位置固定在視窗的左上角，當瀏覽者改變網頁的瀏覽畫面位置時，圖片的位置將會跟著重新變更位置。注意到程式碼第17行，當網頁文件發生捲動時，我們就呼叫move()函式來重新變更圖片位置。
  • 當你開啟範例時會發現，沒有捲動軸可用ㄚ，那是因為網頁中除了圖片外，沒有其他的內容，一個視窗頁面就足以顯示整個網頁文件，所以沒有捲動軸出現，要在視窗頁面不足以顯示整個網頁文件時捲動軸才會出現，這時你才有辦法看到圖片定位的效果，現在你可以開啟範例，加一些段落編號，會有捲動軸出現，你可以改變捲動軸位置看看效果！


心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1194 
主題
395 
精華
113 
積分
1747 
點名
0  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2025-4-11 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
3#
發表於 2010-5-19 10:00 | 只看該作者
人家不要浮動的圖片在左上角啦！我要它在畫面的右下角啦！OK，我們現在就將圖片設定在右下角。
實例學習：
13-8.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE></TITLE>

  5. <SCRIPT Language="JavaScript">
  6. //設定浮動圖片位置更新速度
  7. changespeed = 20
  8. //浮定圖片水平位置設定  
  9. Xpos =100  
  10. //浮定圖片垂直位置設定
  11. Ypos =100

  13. //初始值設定
  14. function setinit()
  15. {
  16. posX = (document.body.clientWidth-Xpos)
  17. posY = (document.body.clientHeight-Ypos)
  18. }

  20. //捲動軸移動時更新圖片位置
  21. function Renew()
  22. {
  23. document.all.mymap.style.left = posX + (document.body.scrollLeft)
  24. document.all.mymap.style.top = posY + (document.body.scrollTop)
  25. }

  27. //特效主程式區
  28. function gomove()
  29. {
  30. setinit()
  31. window.onresize=setinit
  32. setInterval ("Renew()",changespeed)
  33. }
  34. </SCRIPT>
  35. </HEAD>
  36. <BODY>
  37. <!--浮動圖片的網頁敘述-->
  38. <img src="test.gif" id="mymap" style="position:absolute">
  39. <!--呼叫Java浮動表格特效的敘述-->
  40. <script language="JavaScript">
  41. <!--
  42. window.onload=gomove
  43. //-->
  44. </script>
  45. </BODY>
  46. </HTML>
複製代碼
首先我們先定義你圖片的位置與，重新計算定位圖片的時間：程式碼6至11行（網頁原始碼紅色標註），奇怪？！圖片的水平及垂直位置只有100個單位距離？沒錯啦！我們這次是從視窗的右下角來算，這是圖片與視窗邊界的距離，等一下我們還要計算圖片真正的位置啦！
setinit()函式，程式碼6至11行（網頁原始碼藍色標註）：這個函式就是用來設定圖片的初始位置，圖片的初始位置是網頁視窗顯示區域減掉我們預設的圖片與視窗邊界的距離！說的不容易理解，小誌以圖片的水平位置為例，你看了下圖的解說就瞭了啦！




  • Renew()函式，程式碼21至25行（網頁原始碼橘色標註）：setinit()函式只是用來設定網頁載入時圖片的出現位置（頁面還沒捲動時），而Renew()函式的工作則是：頁面捲動時變更圖片的即時位置！
  • gomove()函式，程式碼28至33行（網頁原始碼深藍色標註）：這是浮動圖片效果的起始函式，它會呼叫setinit()函式設定網圖片的出現位置，接著設定window.onresize（網頁視窗大小調整時）事件發生時呼叫Renew()函式改變圖片在網頁中的位置！
  • setInterval ()函式，程式碼32行：怪怪！這個是什麼ㄚ？它是一個定時器函式！作用跟setTimeout()函是相同，不過它不用重複呼叫，你只要設定一次之後它就會一直執行，它會在你設定的時間到時就執行所預設的函式，它的時間單位仍然是毫秒。
    1. setinterval (“code”,interval)
    2. setinterval(“欲執行的程式碼或函式”,間隔時間)
    複製代碼

    • code：在指定的間隔時間到達時所要執行的程式碼或函式呼叫。
    • interval：指定執行程式碼或函式呼叫的間隔時間。

  • 在網頁載入後，我們就呼叫gomove()函式，讓我們的程式開始動起來，程式碼40至44行（網頁原始碼粉紅標註）。小誌你裝傻喔！為何不直接在<BODY>標籤內使用OnLoad事件控制器去呼叫gomove()函式？都可以啦！小誌只是希望你能多學一些技巧嘛！

當你開啟範例13-8.htm時會發現，還是沒有捲動軸可用，看不到效果ㄚ，原因之前已經說過了，你想一想，不過小誌還是預備了一個13-9.htm好讓你能看到效果，開啟看看吧！ 13-9.rar (638 Bytes)
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 人的眼睛長在前面，只看到別人的缺點，絲毫看不到自己的缺點。
返回列表 上一主題