javascript - jQuery 雪插件不会在所有页面上显示相同数量的雪

Question

我在我的网站上使用一个简单的 jQuery 降雪插件:JQuery-Snowfall

如果您查看主页，显示的雪量会比您查看其他页面时少。

以下代码位于 js/script.js 文件中，每个页面都会使用。

$(document).ready(function(e) {
    $(document).snowfall({image :"images/assets/flake.png", minSize: 6,maxSize:25,flakeCount:150});
});

首页，少雪:Click here

本站其他页面，更多雪:Click here

Answer 1

两个页面都有 150 个雪花，但是首页的文档高度比其他页面的文档高度要大。这意味着在视口(viewport)中可以看到不同数量的雪花。

为了解决这个问题，您可以向主体添加一个占据整个视口(viewport)的 div。然后，您可以将雪花应用到该 div，而不是文档。

我不知道你的限制，所以这里有一个仅 JS 的解决方案:

$(document).ready(function(e) {
    var snowfallDiv = $(document.body).append("<div style='height: 100%;width: 100%;left: 0;top: 0;position: fixed;'></div>");

    snowfallDiv.snowfall({image: "images/assets/flake.png", minSize: 6, maxSize: 25, flakeCount: 150});
});

如果您可以正确编辑页面，我建议将 div 放入您的 HTML 中。

这是一个工作示例:

$(document).ready(function(e) {

  $("#snowfall").snowfall();
});

body {
  background-color: black;
  height: 250px;
}

#snowfall {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>
<div style="height:5000px"></div>

<div id="snowfall"></div>