Princess Party

Princess Party - 網頁教學

介面外觀

主選單

新作塗鴉

  • ルイズルイズ by Rei
    2009/08/20(Thu)14:42:54

網頁教學

緩進式浮動物件

2008/05/20 (Tue)
  • 這是一個非常好用的特效!能確實的在 IE、Firefox、Opera、Safari 正常動作。其效果與固定式浮動物件類似,能將物件固定在某位置,但是並不會隨著捲軸死死的鎖在某個定點,他會慢慢的上下移動,最後停在某個定點。若懂得應用此特效,則能做出相當炫麗的效果!本站 Angel Party 面板中即使用了大量的此特效!但因讀取費時,故依然建議放置於html 原始碼的最下方以減輕負擔。

原始碼


設定方式

  • 【修改物件的方式】
     找出原始碼中第 2 行的部分,改成希望跟隨浮動的內容,表單、圖片、文字、表格等等都可以。

    【修改初始座標的方式】
     這個範例的初始座標是(0,0),物件會先出現在(0,0)這個位置,再緩緩移動至固定的位置。如果要修改這個部分的話,可以修改適當原始碼中第 9, 10 行 nowX = 0; nowY = 0;的數值即可。

    【修改座標的方式】
     請找出第 24 行 posX = (innerWidth-600)/2 + 430; 的部份,這一行代表的是浮動圖片的橫座標,innerWidth 代表的是視窗的總寬度,善加利用的話也可以對應各種的解析度。
     第 25 行的 posY = 200; 同樣也代表浮動圖片的縱座標。

    【不隨著捲軸移動的方式】
     請找出第 32 行 offsetX = posX + Scl - nowX;,將其修改為 offsetX = posX - nowX;
     再往第 33 行 offsetY = posY + Sct - nowY;,同樣也將其修改為 offsetY = posY - nowY; 即可。

    【新增一組浮動物件的方式】
     第一步,先新增一組浮動物件,並給他一個 id。或者也可以直接將第1~3行 <div id="FAD".....</div> 整段複製下來,再修改其 id,這裡假設新增一組 id 為 FAD1 的物件。
     第二步,設定物件的寬度與高度。找出第 7, 8 行 adWidth = 64; adHeight = 88;,並往下新增為 adWidth1 = 寬度; adHeight1 = 高度;,這兩行是用來設定物件寬度與高度之用,其實不設也無所謂,設定這個只是為了方便設定座標。
     第三步,設定物件的初始座標。請將第 9, 10 行 nowX = 0; nowY = 0; 複製後往下新增 nowX1 = 橫向初始座標; nowY1 = 縱向初始座標;
     第四步,設定物件變數連結。請複製第 11~13 行
      fad_style = document.getElementById("FAD").style;
      fad_style.width = adWidth;
      fad_style.height = adHeight;
     分別往下新增為
      fad1_style = document.getElementById("FAD1").style;
      fad1_style.width = adWidth1;
      fad1_style.height = adHeight1;
     這三行為設定變數之用,如果上面沒有新增 adWidth1 與 adHeight1 ,這邊也不要新增後面兩行,不然會發生錯誤。
     第五步,設定物件的終末座標。請複製第 24, 25 行 posX = (innerWidth-600)/2 + 420; posY = 200;,並往下新增一組 posX1 與 posY1。 posX1 與 posY1 後面的數字請依需求自行修改。
     最後,設定物件的動作。請複製第 32~37 等 6 行 offsetX = posX + document.documentElement.scrollLeft - nowX; ..... fad_style.top = nowY + 'px';
     往下新增,並分別將所有看到的
      offsetX
      offsetY
      posX
      posY
      nowX
      nowY
      fad_style
     分別全部都改為
      offsetX1
      offsetY1
      posX1
      posY1
      nowX1
      nowY1
      fad1_style
     (註: 總共需修改 14 個位置)

取材網站

相關回應

目前無相關回應

發表回應

您可以利用以下表單發表您對本篇的回應

  • 表情:            
紙娃娃設定

素材、設計