当我在网站上滚动时启动 gif 图像

Question

我想在滚动时启动 Gif 图片。请问你有办法解决吗？这是我在 Wordpress 中的代码：

http://www.pier17.fr/test

<img class="gif-load" src="<?php bloginfo('template_directory'); ?>/img/nos-services-title.gif" />

非常感谢您:)

Answer 1

拍两张图片，一张是png，一张是gif。

最初 img 标签 src 将为 normal.png 或空，当用户向上或向下滚动时只需将 img src 设置为 gif image.Use jquery.mousewheel.js 鼠标滚轮插件（所有浏览器） .当页面是 loading.load 像这样的 gif 图像时初始加载 gif 图像。

    <script type="text/javascript">
      if(document.images){
        img1 = new Image();
        img1.src = "images/image.gif";
      }
   </script>

  // for mouse wheel functionality

    $(document).on('mousewheel', function() {
        if (eventt.deltaY == -1) {
           //user scolls down 
          $('img .gif-load').attr('src','gif-image-path');
        }
        if (eventt.deltaY == 1) {
             //user scolls up
        }
    }
});

当我在网站上滚动时启动 gif 图像

Starting gif image when i scroll on the website

javascript

jquery

scroll

gif