Question

当用户在网站上滚动时，我试图将其改为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。如何在用户滚动时实现这一点。

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

Answer 1

滚动时，您可以使用此代码

  $(document).ready(function(){
       $( window ).scroll(function(){
                $(this).attr("src", "img/giphy.gif");
            });
    });

当你停止滚动时，你可以 Event when user stops scrolling

Answer 2

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 );

Answer 3

目前，您正在检查图像是否正在悬停，然后才更改其来源。而是将scroll事件监听器附加到document。

$(document).on('scroll', callback);

关于滚动事件的jquery

3 个答案: