Question

我正在制作NY卡并试图将所有雪花设置在随机位置，但雪花位置从左侧工作，但顶部没有。

var snowflakes = $("#snowflakes");
var snowflakesCount = snowflakes.data("count");
console.log(snowflakesCount);

for (var i = 0; i < snowflakesCount; i++) {
  var snowflake = $('<div class="snowflake"></div>').appendTo(snowflakes);
  var left = (Math.round(Math.random() * 80)) + "%";
  var top = (Math.round(Math.random() * 40) + 20) + "%";
  snowflake.css("top", top);
  snowflake.css("left", left);
}

body {
  background: #1a0d81;
}
.snowflake {
  position: fixed;
  top: 50px;
  left: 50px;
  background: url("../image/snowflake.png");
  width: 32px;
  height: 33px;
  transition: 5s all linear;
}
#snowflakes {
  position: absolute;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="snowflakes" data-count="10"></div>

snowflake.css("top", top)不起作用。我得到的只是http://imgur.com/a/RmGCp

Answer 1

https://www.nczonline.net/blog/2007/06/03/javascript-variable-names-you-shouldn-t-use/

您不应将top用作var

Answer 2

这是一个工作片段。另一个答案包括有关原因的详细信息。

该代码段针对var top =

发出错误

更改了var名称，它可以正常工作：

＆＃13;

var snowflakes = $("#snowflakes");
var snowflakesCount = snowflakes.data("count");
console.log(snowflakesCount);

for (var i = 0; i < snowflakesCount; i++) {
  var snowflake = $('<div class="snowflake">*</div>').appendTo(snowflakes);
  var left = (Math.round(Math.random() * 80)) + "%";
  var topxx =  (Math.round(Math.random() * 40)) + "%";
  //console.log(topxx);
  snowflake.css("left", left);
  snowflake.css("top", topxx);
}

＆＃13;

body {
  background: #1a0d81;
}
.snowflake {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 32px;
  height: 33px;
  transition: 5s all linear;
  color:white;
}
#snowflakes {
  position: absolute;
  width: 100%;
  height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="snowflakes" data-count="10"></div>

＆＃13;

Answer 3

这是SO上讨论的工作代码可能无法解决你的问题，但会找到你想要的地方：[jfiddle] [2。]
另一种选择是JQuery-snowfall 这个插件SnowFall的一个工作示例。

祝你好运

CSS属性不会使用jQuery更改

3 个答案: