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 的部份,數字越小,濾鏡消失速度越快。
全站熱搜
留言列表