web-dev-qa-db-fra.com

Animer un gif en vol stationnaire

J'ai cherché la réponse à cette question et je l'ai trouvée, mais je ne sais pas comment l'utiliser.

Arrêtez une animation gif lors du chargement, au passage de la souris, démarrez l'activation

La réponse de Guffa à cette question est exactement ce que je veux, mais je ne sais pas comment utiliser ce code.

J'ai le plugin jQuery, mais où dois-je placer le code (pas le plugin; le code qui était dans la réponse de Guffa)? Comment puis-je l'utiliser en référence aux images? Dois-je appeler une fonction pour la faire fonctionner? Si oui, quelle serait la meilleure façon de l'appeler?

Désolé de poser une question à laquelle on a déjà répondu, mais sa réponse n'était pas assez précise et je ne saurais le commenter pour lui demander une réponse plus précise.

javascriptjqueryanimationgif
12
Mark Kramer

Voici un exemple concret de ce dont vous avez besoin - 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>
22
Amit

Je n'ai pas lu le lien, mais le moyen le plus simple de le faire est de changer l'attribut src de balises img avec javascript en survol de la manière suivante (jQuery)

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

Aucun plugin requis ... vous voudrez peut-être précharger le gif animé en ajoutant $('<img />',{ src: 'path_to_animated.gif'}); avant la liaison en survol.

J'espère que cela pourra aider 

4
ianbarker

Essayez ceci si vous êtes prêt à utiliser canvas:

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