完成播放後用另一個替換一個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圖像？

回答

相關問題