Princess Party

Princess Party - 網頁教學

網頁教學

rQuery 觸控式物件淡出

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

    此效果可以讓您的物件在事件觸發的時候,慢慢的由透明變成不透明。根據設定不同,能變化出很多做法。本頁主要是針對介紹滑鼠觸碰時觸發事件來解說。

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

原始碼



設定方式

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

    【rQuery中的透明淡出物件參數】
    1. NowO (預設值為100)
    代表"事件觸發前"的透明度,請輸入0~100之間的數字,0為消失,100為不透明

    2. PosO (預設值為100)
    代表"事件觸發後"的透明度,數字意義同上 NowO 所述

    3. Delay (預設值為20)
    代表淡出的速度,請輸入1以上的數字,數字越大越慢

    4. Hover & Click & Dblclick (預設值皆為0)
    代表"事件觸發的方式"。設定方式皆為 0(無效)、1(單向)、2(雙向) 三種。
    Hover 代表滑鼠指上時觸發。
    設為 0 時,滑鼠指上不觸發淡出
    設為 1 時,滑鼠指上時會觸發淡出,滑鼠離開時不變
    設為 2 時,滑鼠指上時會觸發淡出,滑鼠離開時會回復原狀。

    Click 代表滑鼠點擊時觸發。
    設為 0 時,滑鼠點擊不觸發淡出
    設為 1 時,滑鼠點擊時會觸發淡出,再點擊時不變
    設為 2 時,滑鼠點擊時會觸發淡出,再點擊時會回復原狀。

    Dblclick 代表滑鼠雙擊時觸發。
    設為 0 時,滑鼠雙擊不觸發淡出
    設為 1 時,滑鼠雙擊時會觸發淡出,再雙擊時不變
    設為 2 時,滑鼠雙擊時會觸發淡出,再雙擊時會回復原狀。

    以上三者全都設為 0 或全都未設定時,則代表 Load 觸發,當網頁讀取完畢就會觸發淡出。

    理論上是可以同時寫上各種不同觸發方式,比如說同時寫 Click: 1; Dblclick: 2; ,理論上是能達成單擊觸發,雙擊還原的效果。
    但在下實際測試時,有時候還是會造成奇怪的狀態,因此並不建議這麼設定。

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

取材網站

  • 此特效由小Rei自行開發製作
  •     

相關回應

  • 目前無相關回應

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

  • 表情:            
紙娃娃設定

主題條列

訪客人次

最近迴響

新作塗鴉