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

Question

我想做到这一点，所以我 "enemies" 在特定网页的背景（不是背景，只是其顶部的图像）中以随机高度生成并在屏幕上滚动。现在我有类似的东西：

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

我已经尝试了 2 种方法来将这个随机变量 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>

这两种样式都无法为图像位置设置随机值，我是犯了小错误还是完全错误的方式？

作为奖励问题：是否可以将选取框设置为每张图像随机移动一个方向？

Answer 1

正如几个人所说，你不能混合使用 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() ;
});

Answer 2

你也可以使用普通 javascript 制作同样的东西

html:

<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>

Js:

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';

我还添加了一种更改品牌方向的方法。看看这个fiddle:

https://jsfiddle.net/oyv324z9/

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

Random Image Position in programming website?

html

css

random

image

marquee