打字機特效

以往要在網頁上製造打字機文字特效，你必須藉助Java applet來達成。現在利用Microsoft Internet Explorer 4支援的CSS及Java Script，我們可以輕鬆地產生這種特效，又可避免使用Java applet所造成的下載費時問題。

首先，在網頁的<head>與</head>標籤之間插入下列敘述：

<script language="JavaScript">
var count = 0;
function init() {
    temptext = text.innerText;
    var tempheight = text.offsetHeight;
    text.innerText = '';
    text.style.height = tempheight;
    text.style.visibility = "visible";
    typing();
}
function typing() {
    text.insertAdjacentText("beforeEnd", temptext.charAt(count));
    if ( count < temptext.length-1 ){
        count++;
        setTimeout("typing()", 100);
    } else
        return;
}
</script>

然後將<body>標籤改為：

<body onLoad="init()">

最後在欲應用打字機特效的文字前插入以下標籤：

<span id="text" style="height:0;visibility:hidden">

並在文字後插入以下標籤：

</span>

就可以在網頁上產生打字機文字特效了，在關於本站中有實際應用的例子。

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

Microsoft FrontPage Last Updated: 04/05/99 Get Microsoft Internet Explorer

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