這是利用基本的javascript事件改變CSS特性來造成的半透明效果，重點是你不需要輸入一行script，只要在你想要達成效果的元素html中加入事件指令即可。

同時支援了Firefox與IE。有些人會疑惑，這不是用CSS中的hover就能達到的效果嗎？但hover只支援a元素而以，無法支援div、span等，如果你的元素沒有連結，就無法造成這種效果了。

好，先提供指令，在你想要的任何元素(如div、span、img、p、td等)標籤中，加入以下指令：

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100;"    
onMouseOut="this.style.opacity=0.5;this.filters.alpha.opacity=50;"     
style="opacity: 0.5;filter:Alpha(Opacity=50)"

其實這三個指令也就只是直接控制該元素的CSS而以，藉由同時定義兩種透明度類別(filters與opacity)，同時支援IE與FF。opacity的透明度為0~1，filters則是0~100，中間用 ; 隔開，結尾也要 ; 。

onMouseOver代表滑鼠移過，不透明

onMouseOut代表滑鼠移出，透明度50%

style定義網頁一開始顯示的透明度50%

因此，假設我想讓某圖層(div)整個顯示這種效果，就輸入：

<div class="test_div"    
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100;"     
onMouseOut="this.style.opacity=0.5;this.filters.alpha.opacity=50;"     
style="opacity: 0.5;filter:Alpha(Opacity=50)">     
</div>

效果：

這是半透明圖層

或者你可以把onMouseOut與style透明度都設為0，那麼就只有滑鼠移過才會出現。

效果：

這是半透明圖層

OK，這樣算是蠻簡單的方法，就可以輕易讓網頁中的東西產生漂亮的半透明了。趕快去試試看吧！

轉載請註明來自【Asika Paradise - 飛鳥新樂園】

文章回應

philsu

0

 

 

實用！謝謝aiska分享。

週三 10 十二月 2008, 10:15

回應此篇

B

i

u

Quote

Code

List

List item

URL

名稱 *
Email
網址 URL
驗證碼   
ChronoComments by Joomla Professional Solutions

送出回應

取消

B

i

u

Quote

Code

List

List item

URL

名稱 *
Email
網址 URL
驗證碼   
ChronoComments by Joomla Professional Solutions

送出回應

顯示/隱藏 回應