close

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

 

原始碼

先將以下的原始碼複製下來,貼在  標籤的前面。

 






再將以下的原始碼複製下來,貼在網頁中想應用這個效果的地方。

http://rei.idv.tw/
onmouseover="overTip('sw01')" onmouseout="outTip('sw01')" />



id="sw01" class="sw">

觸控式說明視窗

測試說明


滑鼠離開圖片時,這個視窗不會直接消失,而會有點從上下慢慢消失的特效。

2008/05/29

 

 

設定方式

  • 修改版面的方式
    Html 部分的第一段,是用來呼叫視窗的物件,中間用●色指出的 onmouseover="overTip('sw01')" onmouseout="outTip('sw01')" 是用來呼叫視窗的語法,如果想要換到其他物件上,就把這段放到想用以呼叫視窗的物件就可以了。

    第二段的 id="sw01" 代表彈出的視窗名稱,必須與上面的名稱(預設為sw01)相對應

    要修改彈出視窗的版面的話,也只要將
    中間的內容修改成想要的內容就可以了,視窗版面文字圖片都可以任自己高興修改,算是很容易修改的特效。

    在 Script 中有一行以●色指出的 obj_style.filters.item(0).transition = 23;,修改這個數字,則可以改變視窗消失時的濾鏡樣式, 1-22 分別代表一種樣式,23 則是 1-22 的樣式隨機出現。

    若要修改濾鏡消失的速度,可修改 CSS 中 duration=0.3 的部份,數字越小,濾鏡消失速度越快。
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 hsiung03 的頭像
    hsiung03

    hsiung.博格 ERP軟體

    hsiung03 發表在 痞客邦 留言(0) 人氣()