JQuery Snow插件在所有页面上均未显示出相同数量的雪

Question

我在我的网站上使用一个简单的jQuery降雪插件：jQuery-snowfall

如果您查看主页，则较少的雪显示，如果您查看另一页。

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

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

主页，少雪：单击此处

本网站上的其他页面，更多雪：单击此处

Answer 1

两个页面都有150个雪花，但是，主页的文档高度比其他页面的高度大。这意味着在视口内可见不同数量的雪花。

为了解决这个问题，您可以在占用整个视口的身体中添加一个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>