javascript文本动画和替换

发布于 2024-09-11 15:52:40 字数 1404 浏览 6 评论 0原文

我遇到以下问题：

我尝试对文本进行动画处理，以便它逐个字母地显示。这对我来说是这样的：

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 的了解是有限的。

我会对任何解决方案感到高兴。

原文

I have the following problem:

I try to animate text so that it shows up letter by letter. This works for me like this:

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)};

the html part looks like this:

<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>

What I get is some text (in this case coming from a variable but in the end it is supposed to come from a xml file) that is displayed bit by bit.
The goal is to start displaying the first part of the text after clicking on the button and then remove that whole text again after clicking on the button again and replacing it with other text that gets animated in the same way as the first part. That should be possible over and over again with different pieces of text (it's planned to get that text all from one xml file one part after the other).

The script you see here was pre-made and I am actually not that good with javascript. I tried some stuff with jquery and just normal javascript to remove the text again but it just didn't work out for me... but then again my knowledge about javascript is limited.

I would be happy about any solution.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

傲世九天 2024-09-18 15:52:40

尝试从 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>

（清除子节点的来源）

Try removing all the nodes from the textbox element then running your script again with different text:

([edit] here's a full html file which should work; try starting from there)

<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)

回复收藏 0 原文

~没有更多了~