Анимация подарка при наведении - PullRequest
Новая
       14

Анимация подарка при наведении

12 голосов
/ 19 сентября 2011

Я искал ответ для этого и нашел его, но я не знаю, как его использовать.

Остановить загрузку анимации gif, при наведении мыши запустить активацию

Ответ Гуфы на этот вопрос - именно то, что я хочу, но я не знаю, как использовать этот код.

У меня есть плагин jquery, но куда мне поместить код (не плагин; код, который был в ответе Гуффы)? Как я могу использовать его в отношении изображений? Есть ли функция, которую я должен вызвать, чтобы заставить ее работать? Если это так, как лучше всего это назвать?

Извините, что задал вопрос, на который уже дан ответ, но его ответ не был достаточно конкретным, и я не смог прокомментировать, чтобы попросить его дать более конкретный ответ.

Ответы [ 3 ]

22 голосов
/ 19 сентября 2011

Вот рабочий пример того, что вам нужно - 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>
4 голосов
/ 19 сентября 2011

Я не читал ссылку, однако самый простой способ сделать это - изменить атрибут src тегов img с помощью javascript при наведении курсора следующим образом (jQuery) 

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

Не требуется никаких плагинов ... вы можете предварительно загрузить анимированный GIF-файл, добавив $('<img />',{ src: 'path_to_animated.gif'}); перед привязкой при наведении курсора.

Надеюсь, что поможет

0 голосов
/ 27 апреля 2017

Попробуйте, если вы можете использовать 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>
...