带有 2 个动画 gif 的 Jquery gif 雪

Posted 2023-03-25

【中文标题】带有 2 个动画 gif 的 Jquery gif 雪

【英文标题】：Jquery gif snow with 2 animated gifs

【发布时间】：2013-12-22 16:36:33

【问题描述】：

您好，我有一个雪地 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：偷偷摸摸的圣诞老人正在“下雪”，但跳跃的圣诞老人没有“下雪”。为什么？

【问题讨论】：

一个$(document).ready() 就够了！将脚本合并到一个文档中

我现在已经做到了，但我的跳跃圣诞老人仍然没有下雪！

【参考方案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 );

告诉我进展如何。

【讨论】：

Mike，你是 Javascript 的斯巴达战士，我真的很想提高我的技能，但我觉得很难！非常感谢您的宝贵时间，我的客户是世界上最好的时装设计师之一，您为我节省了一天！我会试着弄清楚你做了什么，我已经更新了演示。再次感谢！

感谢您的称赞，尽管我确信我的同事很高兴我没有像斯巴达人那样穿着，无论编码技能如何。 :) 很高兴它成功了！

不错！我刚刚通过 twitter 与 Archie 谈论将其作为实际选项添加到插件中。

酷！我对开源项目的第一个伪贡献。 :)

【参考方案2】：

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

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

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

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

【讨论】：

您好，脚本是 280 行。我不知道要重命名哪些变量和函数。我试过了，但我无法让它工作。 archibaldbutler.com/projects/stack/snowfall2.jquery.js

看来是别人主动了。检查其他答案

感谢您抽出时间 Smeegs，问题已由 Mike Devenney 解决。