图像在jquery中出现随机位置

Question

在 Whack-a-Mole 类项目https://jsfiddle.net/JennyF/vc2dum2y/ 的这一步中，我要让一个痣出现在随机位置的#gamespace 中。这些是说明（sciv 是一个虚拟的 img）：

--- 要真正随机移动每颗痣，您需要调用随机数函数！在addMole() 函数中调用每个函数一次并将返回值保存到一个变量中（例如xPos 和yPos）。现在您有两个随机值，您需要将style 属性添加到鼹鼠img 标记。例如：

<img src="img/scify.jpg" style="" />

在这个style 属性中，您需要添加一个“left”和“top”属性。每个属性的值将是您的随机数。完成后，痣应出现在#gamespace 各处。调整随机函数的值，使痣保持在#gamespace 内。不要复制此代码。将其用作指南。您最终应该得到如下所示的内容：

<img src="scify.jpg" style="top:'+yPos+'px;left:'+xPos+'px;" />----

这是我的鼹鼠功能。他告诉我要确保我所有的引号都关闭了，但我不明白如何在括号内这样做，除非有第三种类型可以使用：

var xPos;
var yPos;
function addMole(){
  $("#gamespace").append('<img src="img/mole.png"style="top:'+xPos+'px; left:'+yPos+'px;" />');
  randPosX();
  randPosY();
  t=setTimeout(addMole, 2000);
}; // end molee

Answer 1

默认情况下，元素的position 设置为static。当元素具有此定位时，top 和 left 属性无效。

您必须将图像的 position 更改为 relative 或类似的东西，才能按您希望的方式放置。

这是一个例子：

$("#gamespace").append('<img src="img/mole.png" style="position:relative; top:'+xPos+'px; left:'+yPos+'px;" />');

这是您的代码的工作版本。

https://jsfiddle.net/k6g6r2wh/

除了定位问题，还有其他一些问题。 您的 randPosX 和 randPosY 函数确实会生成随机数，但这些数字不会存储在任何变量中，它们只是从函数中返回。您需要使用以下方式存储它们：

var xPos = randPosX();
var yPos = randPosY();