Animazione di una gif al passaggio del mouse

Ho cercato la risposta per questo e l'ho trovato, ma non so come usarlo.Animazione di una gif al passaggio del mouse

Stop a gif animation onload, on mouseover start the activation

risposta di Guffa a questa domanda è esattamente quello che voglio, ma non so come utilizzare quel codice.

Ho il plugin jquery, ma dove inserisco il codice (non il plugin, il codice che era nella risposta di Guffa)? Come lo uso in riferimento alle immagini? C'è una funzione che devo chiamare per farlo funzionare? Se sì, quale sarebbe il modo migliore per chiamarlo?

Siamo spiacenti di fare una domanda a cui è già stata data una risposta, ma la sua risposta non è stata abbastanza specifica e non ho potuto commentare per chiedergli una risposta più specifica.

fonte

2011-09-19 Mark Kramer

Ecco un esempio di lavoro per ciò che è necessario - 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>

fonte

2011-09-19 15:26:52 Amit

Ok, grazie molte. Tuttavia, se fossi in te, metterei il jquery all'interno dei tag dello script. Ma grazie, accetterò questa come risposta. Oh, e il sito a cui ti sei collegato è molto utile, non posso credere di non averlo ancora visto. –

Assicurati di aver precaricato la gif animata, altrimenti potrebbe essere un ritardo nel rollover. O meglio, crea una gif con la gif statica sopra la gif animata, imposta la gif come immagine di sfondo di un elemento e cambia semplicemente il posizionamento dello sfondo sul rollover (ovvero i rollover dello sprite CSS). – Tim

non ho letto il link, ma il modo più semplice per farlo è quello di modificare l'attributo tag img src con javascript hover così (jQuery)

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

Nessun plugin necessari si ... potrebbe voler precaricare la gif animata aggiungendo $('<img />',{ src: 'path_to_animated.gif'}); prima del bover hover.

Speranza che aiuta

fonte

2011-09-19 15:23:33 ianbarker

Lo fa, ma questo è una risposta molto simile a Guffa è che non so cosa fare con quel codice. È una funzione che devo chiamare? Dove lo metto? Mostrami come funzionerebbe all'interno di un documento HTML –

@Mark Kramer in modo che bit non capisci? – ianbarker

Provate questo se siete OK per usare tela:

<!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>

fonte

2017-04-27 05:07:13 sunny

Animazione di una gif al passaggio del mouse

risposta

Problemi correlati