Make your own free website on Tripod.com

淡出淡入

淡出效果範例淡入效果範例

  要在網頁上產生淡出淡入的效果,你必須同時使用 JavaScriptCSSfilter 屬性來達成。

淡出(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 數值,來改變淡入效果的速率,數值愈小就愈快。

回上層 淡出淡入 移動物件 按鈕特效 打字機特效

Microsoft FrontPage Last Updated: 01/14/99 Get Microsoft Internet Explorer

歡迎來信指教!indyhsu@gcn.net.tw