带有2个动画gifs的Jquery雪

Question

嗨，我有一个雪gif动画与两个不同的gifs在这里：

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

一个是下雪，另一个是，我希望他们两个“雪”的页面，而不是只有一个，目前。

我所遵循的教程仅仅是为了有一个动画的gif。所以我复制了降雪脚本，并把它命名为snowfall2.jquery.js

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

我在snowfall2中搜索并替换了将“降雪”改为"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>

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

Answer 1

阿奇，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";

最后，将您的呼叫更改为降雪：

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

告诉我事情进展如何。

Answer 2

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

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

函数/变量名在两个文件中都是相同的，因此只有一个函数将被执行，而不是同时执行。这就是为什么只有一张图片在“下雪”。只要修好就行了。我无法帮助您，因为我不知道jquery插件的内容。

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