javascript - 播放完毕后将 GIF 图片替换为另一张？

Question

我真的是编码新手，我的第一个元素是博客主题。在大多数情况下，我一直在学习很多教程并且效果很好，但我有点卡在这个问题上。

我想做的是让一个 gif 图像播放一次，然后被循环播放的第二个 gif 图像替换。

我们的想法是让一行文本看起来像是用一种老式的计算机字体输入的，然后代表字符放置位置的小下划线在文本输入完成后继续闪烁。

我不太确定这是否需要 javascript，就像我说的那样，我对整个编码工作都很陌生，因此不胜感激!提前致谢。

Answer 1

对于这项工作，您最好忘记动画 gif 并坚持使用 JavaScript 和 CSS。

与您的问题类似的问题已经得到解答，如何编写模拟打字机的脚本: JavaScript typewriter script not working

我将 Thomas 的回答从这个问题中 fork 出来，并添加了一个闪烁的下划线，如下所示:

http://jsfiddle.net/t3Zbd/

JavaScript:

var str = "typing";
var num = 450;
defiredWriteText(str, num);
function defiredWriteText(text,time, index){
    if(index === null || index === undefined) {
        index=0;
    }
    setTimeout(function (){
        var dude = text[index];
        document.getElementById("guide").innerHTML += dude;
        if(index < text.length-1)
            defiredWriteText(text, time, ++index);
        else
             document.getElementById("underscore").style.display = 'inline';
    }, time)
}

CSS:

#underscore {
    display: none;
    animation: blink 1s steps(5, start) infinite;
}
@keyframes blink {
    to {
        visibility: hidden;
    }
}

HTML

<span id="guide"></span><span id="underscore">_</span>

JavaScript 本身是相当标准的，但您需要小心处理 CSS 并进行一些交叉浏览测试。我相信您可能需要添加 webkit 前缀才能在 Safari 中工作。