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

我对编码和我的第一个项目非常陌生，我正在研究博客主题。在大多数情况下，我一直在遵循大量的教程，它的工作很好，但我有点卡在这个问题上。完成播放后用另一个替换一个GIF图像？

我想要做的是有一次gif图像播放，然后被循环的第二个gif图像取代。

这个想法是让一个文本行被输入一个较老的计算机字体，然后在文本输入完成后，表示放置字符的位置的下划线会继续闪烁。

我真的不确定这是否会需要javascript或不，如我所说我很新的整个编码的事情，所以帮助将不胜感激！提前致谢。

来源

2013-11-20 user3012598

最大的问题是定时切换，因为据我所知没有任何东西可以告诉你GIF动画已经结束并且重新开始。但是，如果您知道第一个动画长度的确切值，则可以使用'setTimeout'来执行切换。 –

gif在浏览器中播放的时间长度高度依赖于连接速度。 – Slicedpan

你可能最好忘记了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) 
}

CS S：

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

来源

2013-11-20 10:58:26 usefulcat

.gif Images和Animated .gif's有所不同。

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

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

来源

2013-11-20 10:31:01 Billy

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

回答

相关问题