|
|
|
要在網頁上產生淡出淡入的效果，你必須同時使用 JavaScript 及 CSS 的 filter 屬性來達成。 淡出（fade-out）淡出效果就是指圖像呈現出愈來愈淡，由清楚到完全消失的效果。首先你要在產生淡出效果的圖像 <IMG> 標籤內插入： id="fadeout" style="filter:alpha(opacity=100);" 然後將下列 JavaScript 插入網頁的 <HEAD> 與 </HEAD> 之間： < script language="JavaScript"><!-- function fade_out() { if ( fadeout.filters.alpha.opacity > 0 ) fadeout.filters.alpha.opacity--; else if ( window.loop ) clearInterval(loop); } // --> </script> 最後在網頁的 </BODY> 之前插入： < script language="JavaScript"><!-- loop = setInterval("fade_out()", 100); // --> </script> 你可以更改上面的 100 數值，來改變淡出效果的速率，數值愈小就愈快。 淡入（fade-in）淡入與淡出相反，它是指圖像由無至有逐漸顯現的效果，例如本站首頁的「最新消息」圖像。 id="fadein" style="filter:alpha(opacity=0);" 然後將下列 JavaScript 插入網頁的 <HEAD> 與 </HEAD> 之間： < script language="JavaScript"><!-- function fade_in() { if ( fadein.filters.alpha.opacity < 100 ) fadein.filters.alpha.opacity++; else if ( window.loop ) clearInterval(loop); } // --> </script> 最後在網頁的 </BODY> 之前插入： < script language="JavaScript"><!-- loop = setInterval("fade_in()", 100); // --> </script> 你同樣可以更改上面的 100 數值，來改變淡入效果的速率，數值愈小就愈快。
|
| |||||||
indyhsu@gcn.net.tw