Princess Party

Princess Party - 網頁教學

介面外觀

主選單

新作塗鴉

  • 兀兒德>_<兀兒德>_< by 兀兒德
    2009/09/12(Sat)12:00:38

網頁教學

觸控式說明視窗

2008/05/29 (Thu)
  • 這是能讓使用者在滑鼠碰觸到物件的時候,會跳出說明文的特效,利用 CSS 可以很輕易的做到這個效果,不過若加上了 Java Script 的話,能讓畫面彈出的更漂亮。小 Rei 對它做了一點小修改令其可支援 Firefox 與 Opera 等其他瀏覽器,但不會出現濾鏡效果。

原始碼



設定方式

  • 【修改版面的方式】
     Html 部分的第一段,是用來呼叫視窗的物件,第 3 行的 onmouseover="overTip('sw01')" onmouseout="outTip('sw01')" 是用來呼叫視窗的語法,如果想要換到其他物件上,就把這段放到想用以呼叫視窗的物件就可以了。
     第 7 行的 id="sw01" 代表彈出的視窗名稱,必須與上面的名稱(預設為sw01)相對應
     要修改彈出視窗的版面的話,也只要將 <div id="sw01" ... 到 </div> 中間的內容修改成想要的內容就可以了,視窗版面文字圖片都可以任自己高興修改,算是很容易修改的特效。
     在 Script 中第 23 行的 obj_style.filters.item(0).transition = 23;,修改這個數字,則可以改變視窗消失時的濾鏡樣式, 1-22 分別代表一種樣式,23 則是 1-22 的樣式隨機出現。
     若要修改濾鏡消失的速度,可修改第 3 行 CSS 中 duration=0.3 的部份,數字越小,濾鏡消失速度越快。

取材網站

相關回應

目前無相關回應

發表回應

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

  • 表情:            
紙娃娃設定

素材、設計