Princess Party

Princess Party - 網頁教學

介面外觀

主選單

新作塗鴉

網頁教學

rQuery 固定式浮動物件

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

    其實這是製作此緩進式浮動物件設定時無意間發現的附屬產品,只要修改一個小地方就能變固定式浮動物件了,簡單吧?固定式浮動物件能將物件絕對固定在特定位置,而且還可以選擇是否跟著捲軸移動。

    使用前需先下載 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; 這樣

取材網站

相關回應

dimonkey

謝謝您的特效教學

2011/03/15 (Tue)
  • 我一直在找這個特效,很有多大型網站都有,看起來很動感也很漂亮,感謝教學
  • Mail
  •  

香草

大台中..援.交.妹.網.LI NE:love58966 香 草 外.送.茶.莊,全.套,外.約,叫.小.姐

2017/04/30 (Sun)
  • 大台中..援.交.妹.網.LI NE:love58966 香 草 外.送.茶.莊,全.套,外.約,叫.小.姐
    大台中..援.交.妹.網.LI NE:love58966 香 草 外.送.茶.莊,全.套,外.約,叫.小.姐
    大台中..援.交.妹.網.LI NE:love58966 香 草 外.送.茶.莊,全.套,外.約,叫.小.姐大台中..援.交.妹.網.LI NE:love58966 香 草 外.送.茶.莊,全.套,外.約,叫.小.姐
    大台中..援.交.妹.網.LI NE:love58966 香 草 外.送.茶.莊,全.套,外.約,叫.小.姐
    大台中..援.交.妹.網.LI NE:love58966 香 草 外.送.茶.莊,全.套,外.約,叫.小.姐
    大台中..援.交.妹.網.LI NE:love58966 香 草 外.送.茶.莊,全.套,外.約,叫.小.姐
    大台中..援.交.妹.網.LI NE:love58966 香 草 外.送.茶.莊,全.套,外.約,叫.小.姐
    大台中..援.交.妹.網.LI NE:love58966 香 草 外.送.茶.莊,全.套,外.約,叫.小.姐
  • Mail
  • Home
  •  

發表回應

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

  • 表情:            
紙娃娃設定

素材、設計