Question

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

---要实际随机移动每个痣，你需要调用你的随机数函数！在addMole()函数中调用每个函数一次，并将返回的值保存到变量（例如xPos和yPos）。现在您有两个随机值，您需要在mole 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();

图像在jquery中出现随机位置

1 个答案: