2015-04-15 21 views
5

Czy można uruchomić animację .gif po najechaniu na nią i wstrzymać ją, gdy nie poruszasz się nad nią? Nie chcę resetować obrazu do początku animacji po zatrzymaniu się nad nim.Czy można wstrzymać obraz .gif?

EDIT: Dzięki za pomoc, ale nic nie działało tak, jak chciałem. Najlepsze rozwiązanie znalazłem za to było to:

HTML:

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

JS:

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

Tak, tylko thingy kasowanie.

+0

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

+0

Można zdecydowanie zrób to za pomocą płótna, daj mi znać, jeśli potrzebujesz lepszego przykładu: http://stackoverflow.com/questions/3688460/stopping-gif-animation-programmatically – iMoses

+0

Zobacz także tę bibliotekę: http://slbkbs.org/jsgif/ – iMoses

Odpowiedz

5

Jednym z możliwych rozwiązań byłoby posiadanie dwóch obrazów jednego zdjęcia i jednego animowanego gif. Następnie zmień wartość src po ukryciu (zgodnie z opisem tutaj: https://stackoverflow.com/a/5818049/1845408).

Istnieje również plug-in można użyć do tego celu to: https://github.com/chrisantonellis/freezeframe

Chyba ten plug-in ma zastosowanie logiki opisanej powyżej, po prostu bardziej estetycznie.

Jeśli jednak naprawdę chcesz wstrzymać animację, być może musisz mieć zestaw obrazów, który tworzy animację, i poruszać się po obrazach w ustalonej kolejności po najechaniu myszką, i przerwać, gdy mysz jest wyłączona i nagrać ostatni obraz zatrzymany. Zostało to zrealizowane tutaj: https://stackoverflow.com/a/20644622/1845408Click for DEMO

+7

Nie będzie to symulować efektu pauzy, ponieważ nie zatrzyma się na tej samej pozycji i nie będzie kontynuowany od tej samej pozycji podczas odtwarzania ponownie. – Yani

+0

Posiadanie wielu zdjęć jest bardzo szkodliwe dla wydajności. Możesz przynajmniej stworzyć obrazek animacji i jakiś kod do przejrzenia klatek. – iMoses

Powiązane problemy