JavaScript文本動畫和替換

我嘗試動畫文本，以便它顯示字母。這個工作對我來說是這樣的：

var a = 0, speed = 85, text = [], story = "bla bla... text"; 
function tickertext(){ 
obj = document.getElementById("textbox"); 
text[a] = document.createTextNode(story.charAt(a)); 
obj.appendChild(text[a]); 
a++; 
a != story.length && setTimeout(function(){tickertext()}, speed)} 
if(window.addEventListener) { 
window.addEventListener("click", tickertext, false)} 
else{window.attachEvent && window.attachEvent("onclick", tickertext)};

HTML部分看起來是這樣的：

<button onClick="tickertext()">Next</button> 

    <table> 
    <tr> 
     <td> 
     <div id="image"> 
      <img src="img/background1.jpg" width="600" height="400"><br> 
      <br> 
      <br> 
      <p id="textbox" style="padding-left:25px; width:550px;"><br></p> 
      <canvas id="mycanvas" width="600" height="400"></canvas> 
     </div> 
     </td> 
    </tr> 
    </table>

我得到的是一些文字（在這種情況下，從一個變量，但到底未來它應該來自xml文件），它是逐位顯示的。目標是在單擊按鈕後開始顯示文本的第一部分，然後再次單擊該按鈕後再刪除整個文本，並用其他文本替換爲與第一部分相同的動畫。這應該是可能一遍又一遍地使用不同的文本塊（它計劃從一個xml文件一個接一個地讀取所有文本）。

你在這裏看到的腳本是預製的，而我其實並不擅長javascript。我嘗試了一些與jQuery的東西，只是正常的JavaScript再次刪除文本，但它只是沒有爲我工作......但是，然後再次我對JavaScript的知識是有限的。

我會很高興任何解決方案。

來源

2010-07-29 hdr

嘗試從textbox元素用不同的文字刪除所有節點然後再次運行腳本：

（[編輯]這裏是一個完整的HTML文件，它應該工作;儘量從那裏開始）

<html> 
<head> 
<title>Test</title> 
<script type="text/javascript"> 
var a = 0, speed = 85, text = [], story = "bla bla... text"; 
function tickertext(){ 
    obj = document.getElementById("textbox"); 
    text[a] = document.createTextNode(story.charAt(a)); 
    obj.appendChild(text[a]); 
    a++; 
    a != story.length && setTimeout(function(){tickertext()}, speed) 
} 
/*if(window.addEventListener) { 
window.addEventListener("click", tickertext, false)} 
else{window.attachEvent && window.attachEvent("onclick", tickertext)};*/ 
function clrtext(){ 
var tbox = document.getElementById("textbox"); 

if (tbox.hasChildNodes()) 
{ 
    while (tbox.childNodes.length >= 1) 
    { 
     tbox.removeChild(tbox.firstChild);  
    } 
} 
a=0; 
} 
</script> 
</head> 
<body> 
<button onClick="tickertext()">Next</button> 
<button onClick="clrtext()">Clear</button> 

    <table> 
    <tr> 
     <td> 
     <div id="image"> 
      <img src="img/background1.jpg" width="600" height="400"><br> 
      <br> 
      <br> 
      <p id="textbox" style="padding-left:25px; width:550px;"><br></p> 
      <canvas id="mycanvas" width="600" height="400"></canvas> 
     </div> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

（source for clearing child nodes）

來源

2010-07-29 19:24:49 NickAldwin

感謝您的回答，但不幸的是，將這段代碼添加到我的JavaScript文件中，不僅刪除了文本（我甚至無法再啓動文本動畫），而且還將我置於文本。 – hdr 2010-07-29 19:50:53

@hdr我不明白它爲什麼會刪除畫布......它不是上面顯示的HTML中的文本框的子項。 – NickAldwin 2010-07-29 20:59:21

我不太確定我自己。如果我告訴你我使用的額外插件可能會有所幫助......也許會有衝突。我使用「scriptaculous」與另一個按鈕來隱藏文本和畫布，使只有背景可見，那麼也有jquery和原型（需要scriptaculous）。其他按鈕的代碼：但我無法想象這會影響動畫......還是這樣？ – hdr 2010-07-29 21:14:18

JavaScript文本動畫和替換

回答

相關問題