Question

我真的很喜欢编码和我的第一个项目我正在研究一个博客主题。在大多数情况下，我一直在学习很多教程，并且很好地解决了这个问题但我仍然坚持这个问题。

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

这个想法是让一个文本行显示在一个看起来较旧的计算机字体中，然后表示字符放置位置的小下划线将在文本完成输入后继续闪烁。 / p>

我不确定这是否是需要javascript的东西，就像我说我对整个编码事情都很新，所以请帮助我们！提前谢谢。

Answer 1

.gif Images和Animated .gif's存在差异。

动画gif没有javascript控件。您可以选择使用javascript切换单独的gif图像，并且可以控制。你可能想看看这个：

http://www.w3schools.com/js/js_timing.asp

Answer 2

你可能最好忘记GIF动画并坚持使用JavaScript和CSS来完成这项工作。

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

我从这个问题中分出了托马斯的回答，并添加了一个闪烁的下划线，如此：

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中使用。

完成播放后，用另一个GIF图像替换GIF图像？

2 个答案: