当我在网站上滚动时启动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插件用于鼠标滚轮（所有浏览器）.Ily加载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
        }
    }
});