Javascript 随机放置在页面上的图像

我正试图让很多.gif出现在页面上的随机位置。我已经设法让第一个执行此操作，但由于某些原因，后面的所有操作都保持静态，尽管具有相同的id。gif还有一个可拖动的函数

谁能告诉我哪里出了问题

* {
保证金：0；
填充：0；
}
html{
字体：16px“Segoe UI”，“Segoe WPC”，Helvetica，Arial，“Arial Unicode MS”，无衬线；
}
}
#w{}
window.onLoad=Prep（）；
函数Prep（）{
窗高=窗内高度；
window_Width=window.innerWidth；
image_Element=document.getElementById（“image”）；
image\u Height=image\u Element.clientHeight；
image\u Width=image\u Element.clientWidth；
可用空间=窗口高度-图像高度；
可用空间=窗口宽度-图像宽度；
var changereval=3000；//时间必须以毫秒为单位。因此，3000是3秒
设置间隔（移动图像、更改间隔）；
}
函数moveImage（）{
var randNum_V=Math.round（Math.random（）*availSpace_V）；
var randNum_H=Math.round（Math.random（）*availSpace_H）；
image_Element.style.top=randNum_V+“px”；
image_Element.style.left=randNum_H+“px”；
}
$（函数（）{
$（'.draggable'）.draggable({
卷轴：没错，
光标：“移动”
});
});
$（函数（）{
$（'.draggable'）.draggable({
卷轴：没错，
光标：“移动”
});
});

您只能使用

id

标记一次。改用类，例如：

<img src="images/.gif" height="150" class="draggable ui-draggable image" alt="paper">

---

您还需要进行其他更改，但这应该会给您一个大致的想法。

因为您使用的是JQuery，您可以执行以下操作：

window.onload = Prep();
var window_Height, window_Width;
var changeInterval = 3000;

function Prep(){
  window_Height = $(window).height();
  window_Width = $(window).width();
}

function moveImage(imgEl,space_V,space_H){
  var randNum_V = Math.round(Math.random() * space_V);
  var randNum_H = Math.round(Math.random() * space_H);

  imgEl.style.top = randNum_V + "px";
  imgEl.style.left = randNum_H + "px";
}

$('img').each(function(){
  var img = $(this);
  var image_Height = img.height();
  var image_Width = img.width();
  var availSpace_V = window_Height - image_Height;
  var availSpace_H = window_Width - image_Width;

  setInterval(moveImage(img,availSpace_V,availspace_H),changeInterval);
});

$('#w').find('img').each(function(){...

我已经缩短了Prep函数以获得窗口尺寸，并更改了moveImage函数以将必要的变量作为参数传递。这样，您就可以对每个图像单独使用该函数

JQuery.each以页面上的每个img元素为目标，并相应地执行moveImage函数。如果您希望获得更具体的图像元素，而不是针对所有图像元素，您可以通过执行以下操作来选择div中id为w的元素：

window.onload = Prep();
var window_Height, window_Width;
var changeInterval = 3000;

function Prep(){
  window_Height = $(window).height();
  window_Width = $(window).width();
}

function moveImage(imgEl,space_V,space_H){
  var randNum_V = Math.round(Math.random() * space_V);
  var randNum_H = Math.round(Math.random() * space_H);

  imgEl.style.top = randNum_V + "px";
  imgEl.style.left = randNum_H + "px";
}

$('img').each(function(){
  var img = $(this);
  var image_Height = img.height();
  var image_Width = img.width();
  var availSpace_V = window_Height - image_Height;
  var availSpace_H = window_Width - image_Width;

  setInterval(moveImage(img,availSpace_V,availspace_H),changeInterval);
});

$('#w').find('img').each(function(){...

---

希望这有帮助

非常感谢你的提示。不过，吉夫一个也没动。