当我在网站上滚动时启动 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 图像。使用 jquery.mousewheel.js 插件用于鼠标滚轮（所有浏览器）。初始加载 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
        }
    }
});