带有 2 个动画 gif 的 Jquery gif 雪

Question

您好，我有一个雪地 gif 动画，这里有 2 个不同的 gif：

http://archibaldbutler.com/projects/stack/

一个正在下雪，但另一个没有，我希望他们都在页面上“下雪”，而不是一个，目前。

我遵循的教程仅用于制作一个动画 gif。所以我复制了降雪脚本并将其命名为 snowfall2.jquery.js

    <script src='snowfall.jquery.js'></script>
<script src='snowfall2.jquery.js'></script>

我在 snowfall2 中进行了搜索并替换，以将“snowfall”替换为“snowfall2”。

在我的 index.html 的标题中，我添加了对 snowfall2.jquery.js 的调用，它调用了 gif 图像：

<script type='text/javascript'>     
    $(document).ready(function(){
        $('.collectonme').hide();
        //Start the snow default options you can also make it snow in certain elements, etc.
        $(document).snowfall({image :"images/santa-sneaking-smiley-emoticon2.gif", minSize: 40, maxSize:100});
  $(document).snowfall2({image :"images/santa-sneaking-smiley-emoticon22.gif", minSize: 40, maxSize:100});



    });
     </script>

我的问题是：一个 gif：偷偷摸摸的圣诞老人正在“下雪”，但跳跃的圣诞老人没有“下雪”。为什么？

Answer 1

Archie，Smeegs 的回答会告诉你为什么两张图片都没有下雪。我弄乱了插件并将其设置（快速破解）以接受一系列图像。只会使用前两个图像，但这应该适用于您的情况。

首先，将原始脚本中的第 136、137 和 138 行替换为以下行：

if (options.images) {
    flakeMarkup = $(document.createElement("img"));
    flakeMarkup[0].src = this.id % 2 == 0 ? options.images[0] : options.images[1];

然后，删除页面中的第二个脚本块和对脚本的第二次调用，并更新您的 document.ready() 以创建一个数组以传递并用两个图像填充它（当然使用您的图像名称）：

var flakeImages = [];
flakeImages[0] = "snowflake.png";
flakeImages[1] = "gemstone.png";

最后，将你对 snowfall 的调用改为：

$(document).snowfall({ images: flakeImages , minSize: 40, maxSize: 100 });

告诉我进展如何。

Answer 2

我假设snowfall.jquery.js 和snowfall2.jquery.js 是同一个文件的副本。

如果是这种情况，您仍然只是加载同一个文件两次。他们是否有不同的名字并不重要。

两个文件中的函数/变量名称相同，因此只有一个函数会被执行，而不是同时执行。这就是为什么只有一个图像是“下雪”的。至于修复它。我不知道jquery插件的内容，帮不了你。

如果文件足够小，您可以遍历它并重命名所有全局变量和函数，以便每个都有两个实例。