javascript - 滚动事件上的jquery

标签 javascript jquery html

我正在努力做到这一点,以便当用户在网站上滚动时,img 会更改为 gif。

HTML

<img src="img/giphy.gif" alt="" id="imgAnimate">

JQUERY

$(document).ready(function()
        {
            $("#imgAnimate").hover(
                function()
                {
                    $(this).attr("src", "img/giphy.gif");
                },
                function()
                {
                    $(this).attr("src", "img/giphy.png");
                });
        });

我明白了,但现在是当您将鼠标悬停在 img 上时它会变成 gif。 如何在用户滚动时实现这一点。

谢谢你,如果你能帮助我。

最佳答案

https://jsfiddle.net/q6Lun0dj/1/

使用这个脚本:

(function( $ ) {
  $(function() {
    var scrollNow = false;
    $( window ).scroll(function() {
      if(!scrollNow){
        scrollNow = true;
        $("#imgAnimate").attr("src", "http://bart.aoweb.nl/template%205/img/giphy.gif");
      }
      clearTimeout( $.data( this, "scrollCheck" ) );
      $.data( this, "scrollCheck", setTimeout(function() {
        scrollNow = false;
        $("#imgAnimate").attr("src", "http://bart.aoweb.nl/template%205/img/giphy.png");
      }, 250) );

    });

  });

})( jQuery );

关于javascript - 滚动事件上的jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37482207/

相关文章:

Javascript 在文本上暂停和恢复过渡动画

带键的 Javascript 数组

javascript - Hello.js 与 Passport.js?

javascript - NodeJS Bluebird promise 在处理程序中创建但未从中返回

javascript - 将多个字符串参数传递给 Jquery 函数

jQuery Slick 轮播 slider 同步不起作用

html - 如何水平对齐表格?

javascript - 嵌套 JSON : How to add (push) new items to an object?

jquery - 使用 jquery 选择具有最高 z-index 的元素

javascript - 在循环中更改变量