Animowanie gify na hover

Szukałem odpowiedzi na to i znalazłem, ale nie wiem jak z niego korzystać.Animowanie gify na hover

Stop a gif animation onload, on mouseover start the activation

odpowiedź Guffa do tej kwestii jest dokładnie to, co chcę, ale nie wiem, jak korzystać z tego kodu.

Mam wtyczkę jquery, ale gdzie umieścić kod (nie wtyczkę, kod, który był w odpowiedzi Guffa)? Jak korzystać z tego w odniesieniu do obrazów? Czy istnieje funkcja, którą muszę wywołać, aby działała? Jeśli tak, jaki byłby najlepszy sposób, aby to nazwać?

Przepraszamy za pytanie, na które już udzielono odpowiedzi, ale jego odpowiedź nie była wystarczająco szczegółowa i nie mogłem wypowiedzieć się, aby poprosić go o bardziej szczegółową odpowiedź.

Źródło

2011-09-19 Mark Kramer

Oto przykład pracy dla co trzeba - http://jsfiddle.net/EXNZr/1/

<img id="imgDino" src="http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870" /> 

<script> 
    $(function() { 
     $("#imgDino").hover(
      function() { 
       $(this).attr("src", "animated.gif"); 
      }, 
      function() { 
       $(this).attr("src", "static.gif"); 
      }       
     );     
    }); 
</script>

Źródło

2011-09-19 15:26:52 Amit

OK, dziękuję bardzo. Jednakże, gdybym był tobą, po prostu wstawiłbym jquery wewnątrz znaczników skryptu. Ale dziękuję, przyjmuję to jako odpowiedź. Aha, a strona, z którą się łączysz, jest bardzo przydatna, nie mogę uwierzyć, że jeszcze tego nie widziałem. –

Upewnij się, że wstępnie wczytałeś animowany gif, w przeciwnym razie może to być opóźnienie przewrócenia. Albo lepiej, zrób jeden gif ze statycznym gifem nad animowanym gifem, ustaw gif jako obraz tła elementu i po prostu zmień położenie tła na rollover (inaczej narzucone przez CSS). – Tim

mam nie czytać odnośnik jednak najprostszym sposobem, aby to zrobić jest zmiana atrybutu znaczniki img src z javascript przy aktywowaniu tak (jQuery) wymagane

$(function() { 
    $('a').hover(function() { 
     $(this).attr('src','path_to_animated.gif'); 
    },function() { 
     $(this).attr('src','path_to_still.gif'); 
    } 
});

Brak wtyczki ... ty może chcieć wstępnie wczytać animowany gif, dodając $('<img />',{ src: 'path_to_animated.gif'}); przed wiązaniem hover.

nadzieję, że pomoże

Źródło

2011-09-19 15:23:33 ianbarker

to robi, ale to bardzo podobną odpowiedzią na guffę jest to, że nie wiem, co zrobić z tym kodem. Czy jest to funkcja, którą muszę wywołać? Gdzie to umieściłem? Pokaż mi, jak to będzie działać w dokumencie HTML. –

@ Mark Kramer, więc które z nich nie rozumiesz? – ianbarker

Spróbuj tego jeśli jesteś OK, aby użyć płótnie:

<!DOCTYPE html> 
    <html> 
    <head> 
     <style> 
      .wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;} 
      .canvas {position:absolute;z-index:1;} 
      .gif {position:absolute;z-index:0;} 
      .hide {display:none;} 
     </style> 

     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

     <script> 
      window.onload = function() { 
       var c = document.getElementById("canvas"); 
       var ctx = c.getContext("2d"); 
       var img = document.getElementById("gif"); 
       ctx.drawImage(img, 0, 0); 
      } 

      $(document).ready(function() { 
       $("#wrapper").bind("mouseenter mouseleave", function(e) { 
        $("#canvas").toggleClass("hide"); 
       }); 
      }); 
     </script> 

    </head> 
    <body> 

    <div> 
     <img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif"> 

     <canvas id="canvas" class="canvas" width="400px" height="328px"> 
     </canvas> 

     <div id="wrapper" class="wrapper"></div> 
    </div> 

    </body> 
    </html>

Źródło

2017-04-27 05:07:13 sunny

Animowanie gify na hover

Odpowiedz

Powiązane problemy