Princess Party

Princess Party - 網頁教學

介面外觀

主選單

新作塗鴉

網頁教學

rQuery 緩進式浮動物件

2011/03/01 (Tue)
  • rQuery 是由小Rei自行開發與更新的Javascript,其檔案為免費,僅供個人學習之用。其作用是能讓使用者僅載入這一個 rquery.js 後,僅需做一點簡單設定即可達成效果。

    浮動物件系列一直是小 Rei 網站上的特效詢問率數一數二高的,小Rei本身也經常使用,因此 rQuery 計劃的第一個特效便是它囉!

    緩進式浮動物件能將物件由某個定點移動至某個定點後固定在某位置,並可設定到達定點後是否隨著捲軸移動。若懂得應用此特效,則能做出相當炫麗的效果!本站 Angel Party 面板中即使用了大量的此特效!

    使用前需先下載 http://rei.idv.tw/sample/parts/rquery.js 這個檔案,並在 html 檔案中載入。

原始碼



設定方式

  • 【使用的方式】
    載入 rquery.js 後,便可以使用 <div class="float" title="參數"> </div>的方式來製作浮動物件了,同頁面中要製作幾組浮動物件都可以,參數的寫法類似CSS,使用必須注意大小寫。

    【rQuery中的浮動物件參數】
    1. NowX & NowY (預設值為0)
    這是浮動物件的起始座標,NowX代表起始X座標,NowY代表起始Y座標
    輸入方式為數字或算式,這算式中有 4 個變數(maxWmaxHobjWobjH)可以使用
    maxW 代表瀏覽器可視範圍總寬度
    maxH 代表瀏覽器可視範圍總高度
    objW 代表此浮動物件總寬度
    objH 代表此浮動物件總高度
    輸入範例:
    NowX: 0; NowY: 100; 代表 (0,100)的座標
    NowX: 50+50; NowY: 50-50; 代表 (100,0)的座標
    NowX: maxW-objW; NowY: maxH-objH; 代表貼在最角落的座標
    NowX: (maxW-objW)/2 + 500; NowY: 100; 代表由中間算起+500的座標(當寬度設為1000置中時適用)

    2. PosX & PosY (預設值為0)
    這是浮動物件的終末座標,PosX代表終末X座標,PosY代表終末Y座標
    輸入方式同NowX & NowY

    3. Delay (預設值為10)
    代表漂浮速度,請使用 1 以上的數字,數字越大越慢。把此處改為 1 就自動變成固定式浮動物件了。

    4. Align & Valign (預設值為left & top)
    代表對齊,當Align: right 時,(500,0)的座標會是從右側、上方算起 500,0
    Align 可設為 left 或 right; Valign 可設為 top 或 bottom (請特別注意大小寫)

    5. Scroll (預設值為yes)
    代表浮動是否跟隨捲軸移動,只有在 Scroll: no; 的時候,浮動物件不會跟著捲軸移動

    6. Title (無預設值)
    因為用了title屬性當設定,萬一真的要在title填字的話,就填在這吧。
    Title: 顯示的Title; 這樣

取材網站

相關回應

目前無相關回應

發表回應

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

  • 表情:            
紙娃娃設定

素材、設計