Princess Party

Princess Party - 網頁教學

介面外觀

主選單

新作塗鴉

網頁教學

固定式浮動物件

2008/05/19 (Mon)
  • 這是能將物件絕對固定在特定位置,而且還可以跟著捲軸移動。多半用來做為回首頁或選單等功能。但因讀取略費時,故建議放置於頁面的最底下以減輕讀取負擔。

原始碼


設定方式

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

    【簡易右下角固定的方式】
     這個範例的預設位置是右下角,但是如果只單純更換物件,是不會很正確的固定在右下角的!這個時候可以利用原始碼中第 7, 8行的部分,修改其中的數值,其代表的意思是物件的寬和高,只要適當設定就可以 100% 沒有問題。

    【修改座標的方式】
     請找出第 28 行 posX = ((innerWidth - markW)-barW) * (markX/100); 的部份,這一行代表的是浮動圖片的橫座標。
     第 29 行的 posY = ((innerHeight - markH)-barH) * (markY/100); 同樣也代表浮動圖片的縱座標,目前我暫時只知道 innerWidth、innerHeight 代表視窗總寬度或高度,markW、markH 代表物件寬度高度,barW、barH 則是用來補償捲軸用,其他幾個變數的意思我還不太理解。

取材網站

  • 這個站的 Java Script 區有這個效果,不過已經列入舊版資料區了 ^﹏^|||。

相關回應

目前無相關回應

發表回應

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

  • 表情:            
紙娃娃設定

素材、設計