Animando un gif en vuelo estacionario

He buscado la respuesta y la encontré, pero no sé cómo usarla.Animando un gif en vuelo estacionario

Stop a gif animation onload, on mouseover start the activation

respuesta de Guffa a esa pregunta es exactamente lo que quiero, pero no sé cómo utilizar ese código.

Tengo el plugin de jQuery, pero ¿Dónde coloco el código (no el plug-in, el código que se encontraba en la respuesta de Guffa)? ¿Cómo lo uso en referencia a las imágenes? ¿Hay alguna función que deba llamar para que funcione? Si es así, ¿cuál sería la mejor manera de llamarlo?

sentimos por hacer una pregunta que ya ha sido contestada, pero su respuesta no fue lo suficientemente específico y no podía hacer comentarios para pedirle una respuesta más específica.

Fuente

2011-09-19 Mark Kramer

Aquí está un ejemplo de trabajo para lo que necesita - 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>

Fuente

2011-09-19 15:26:52 Amit

Bien, muchas gracias. Sin embargo, si yo fuera tú, pondría el jquery dentro de las etiquetas de script. Pero gracias, aceptaré esto como la respuesta. Ah, y el sitio al que vinculó es muy útil, no puedo creer que aún no lo haya visto. –

Asegúrese de precargar el archivo .gif animado, de lo contrario, podría ser un retraso en la renovación. O mejor aún, haz un gif con el gif estático encima del gif animado, configura el gif como imagen de fondo de un elemento y simplemente cambia el posicionamiento de fondo en rollover (también conocido como CSS sprite rollovers). – Tim

no he leído el enlace, sin embargo, la forma más fácil de hacer esto es cambiar el atributo de etiquetas img src con javascript en vuelo estacionario como esto (jQuery)

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

No hay complementos necesarios que ... Es posible que desee precargar el archivo .gif animado al agregar $('<img />',{ src: 'path_to_animated.gif'}); antes de enlazar el elemento emergente.

Espero que ayude

Fuente

2011-09-19 15:23:33 ianbarker

Lo hace, pero eso es una respuesta muy similar al problema de Guffa es que no sé qué hacer con ese código. ¿Es una función que necesito llamar? ¿Dónde lo pongo? Muéstrame cómo funcionaría dentro de un documento HTML –

@Mark Kramer, ¿qué bits no entiendes? – ianbarker

Prueba este si está bien usar lienzo:

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

Fuente

2017-04-27 05:07:13 sunny

Animando un gif en vuelo estacionario

Respuesta

Cuestiones relacionadas