Html 编程网站中的随机图像位置？

我想让一个特定网页的背景（不是背景，只是上面的图像）以随机高度生成“敌人”，并在屏幕上滚动。现在我有一些类似于：

<script>
    function numberRandomizer(){
      var x = Math.floor((Math.random() * 500) + 300); //random number between 300 and 800
      return x;
    }
  </script>

函数numberRandomizer（）{
var x=Math.floor（（Math.random（）*500）+300）；//300到800之间的随机数
返回x；
}

我尝试了两种方法将这个随机变量X应用到通过在屏幕上滚动循环的图像：

1） 做我认为可行的事情，编辑每幅图像，得到左上角的一个随机值

  <marquee behavior="scroll" direction="left" scrollamount="numberRandomizer()"><img src="/aboutme/enemy.png" width="120" height="80" top="numberRandomizer()" left="numberRandomizer()"/><p></marquee>

2） 尽管据我所知，这会使所有敌人都有相同的位置，但请尝试CSS样式以使位置随机，看看是否有效：

 <style>
    img {
      top: numberRandomizer();
      left: numberRandomizer();
    }
  </style>

img{
顶部：numberRandomizer（）；
左：numberRandomizer（）；
}

这两种样式都不能为图像位置设置一个随机值，我是做错了一件小事还是完全走错了路

---

作为一个额外的问题：是否可以将marquee设置为每个图像的随机方向？

正如一些人所说，您不能混合使用JS和CSS。但是，如果您使用jQuery，这非常简单。基本上，您希望使用jQuery将CSS样式添加到

img

。像这样的

//your trigger here and then..
$( "#your_img_id" ).css( "left", function(index) {
  return index * numberRandomizer() ;
});
$( "#your_img_id" ).css( "right", function(index) {
  return index * numberRandomizer() ;
});

---

您也可以使用普通javascript来实现同样的功能

html:

我还添加了一种改变品牌方向的方法。看看这把小提琴：

---

你不能像那样混合使用javascript和css。你需要使用javascript来获得这个img标记，然后改变它的顶部和左侧。OP似乎对jQuery不太了解，也许更详细的解释可以消除OP的混淆？我有点理解这里发生了什么，但是，当尝试将ID应用于我的选取框的图像时，图像从未改变方向：

函数numberRandomizer（）{var x=Math.floor（（Math.random（）*500）+300）；//300到800之间的随机数返回x；}document.getElementById（“敌人”）.style.top=numberRandomizer（）+'px'我当前的身体。抱歉，如果我做了一些明显错误的事情，webdevYou应该更改字幕元素的方向，而不是图像本身：抱歉，当我的意思是方向没有更改时，我的意思是图像不会按numberRandomizer（）移动或向下移动的X值，并保持在屏幕顶部。由于您的图像在字幕中，您需要更改此元素的样式。该元素的工作非常有魅力，只需进行一些错误修复。我遇到的另一个问题是在不运行其他函数的情况下执行样式编辑器，但我设法解决了这个问题。谢谢
<marquee behavior="scroll" direction="left" id="elem">Test</marquee>
<br/>
<button id="butR">Right</button>
<button id="butL">Left</button>

<div class="area">
<div id="enemy"></div>
</div>

document.getElementById('butR').addEventListener("click", function(){
    document.getElementById('elem').setAttribute("direction", "right");   
});

document.getElementById('butL').addEventListener("click", function(){
    document.getElementById('elem').setAttribute("direction", "left");   
});

function numberRandomizer(){
  var x = Math.floor((Math.random() * 250) + 50); //random number between 50 and 300
  return x;
}


document.getElementById('enemy').style.top = numberRandomizer() + 'px';
document.getElementById('enemy').style.left = numberRandomizer() + 'px';