2015-04-15 16 views
5

Ist es möglich, die GIF-Animation zu starten, wenn Sie den Mauszeiger darüber bewegen und anhalten, wenn Sie nicht darüber schweben? Ich möchte das Bild nicht auf den Anfang der Animation zurücksetzen, wenn ich den Mauszeiger darüber halte.Ist es möglich, ein GIF-Bild anzuhalten?

EDIT: Danke für die Hilfe, aber nichts hat funktioniert, wie ich wollte. beste Lösung, die ich für diese gefunden war:

HTML:

<img id="gif1" src="static1.jpg"> 

JS:

$("#gif1").hover(
    function() { 
     $(this).attr("src", "animate1.gif"); 
    }, 
    function() { 
     $(this).attr("src", "static1.jpg"); 
    }       
); 

Also, nur das Zurücksetzen Dingen.

+0

http://stackoverflow.com/questions/5818003/stop-a-gif-animation-onload-on-mouseover-start-the-activation –

+0

Sie auf jeden Fall kann es Leinwand Sie verwenden, lassen Sie mich wissen, wenn Sie ein besseres Beispiel benötigen: http://stackoverflow.com/questions/3688460/stopping-gif-animation-programmatically – iMoses

+0

Werfen Sie auch einen Blick auf diese Bibliothek: http://slbkbs.org/jsgif/ – iMoses

Antwort

5

Eine mögliche Lösung wäre zwei Bilder ein Standbild und ein animiertes GIF zu haben. Dann ändern Sie die src wenn schwebte (wie hier beschrieben: https://stackoverflow.com/a/5818049/1845408).

Es wird auch Plug-in, dann können Sie dies für diesen Zweck verwenden: https://github.com/chrisantonellis/freezeframe

Ich denke, dieses Plug-in wendet die Logik oben beschrieben, nur schön mehr. Wenn Sie die Animation wirklich pausieren möchten, benötigen Sie möglicherweise die Bildergruppe, die die Animation erstellt, und bewegen sich durch die Bilder in der voreingestellten Reihenfolge, wenn Sie den Mauszeiger darüber bewegen letztes Bild pausiert. Dies wurde hier umgesetzt: https://stackoverflow.com/a/20644622/1845408Click for DEMO

+7

Dies simuliert keinen Pausiereffekt, da er nicht an der gleichen Position stoppt und bei erneuter Wiedergabe nicht von der gleichen Position fortfährt. – Yani

+0

Mehrere Bilder sind sehr schlecht für die Leistung. Das Mindeste, was Sie tun können, ist ein Bild-Sprite der Animation und eine Art Code, um durch die Frames zu gehen. – iMoses

Verwandte Themen