Question

我有一个HTML页面上有5个图像（每个48px×48px）。我想在每次加载页面时在网页上的随机位置显示图像。

我不知道如何实现这一点，我只知道我将需要CSS和JavaScript （用于随机化）。任何想法或建议？

以下是HTML代码示例：

  <a href="http://twitter.com/"><img alt="Twitter" src="/images/twitter-48.png" /></a>
  <a href="http://facebook.com/><img alt="Facebook" src="/images/facebook-48.png" /></a>
  <a href="https://plus.google.com/"><img alt="Google Plus" src="/images/plus-48.png" /></a>
  <a href="https://github.com/"><img alt="GitHub" src="/images/github-48.png" /></a>

Answer 1

使用纯JavaScript（无库）的解决方案

var imgs = document.querySelectorAll('.rand'), 
    len = imgs.length, 
    /* subtract the width/ height of images */
    w = document.body.clientWidth - 48, 
    h = document.body.clientHeight - 48;

for(var i = 0; i < len; i++) {
  imgs[i].style.top = Math.floor(Math.random() * h) + 'px';
  imgs[i].style.left = Math.floor(Math.random() * w) + 'px';
}

working demo

Answer 2

让我们假设您已经将图像硬编码到您的html文档中。你需要做什么（如果你想用PHP实现这一点）是为每个元素添加一个style属性。在您的情况下，您的图片会保留在<a>个标记内，因此您需要随机定位<a>标记，而不是图像......

function generateRandomPositions(){

  // define maximum and minimum 'top' values
  $maxTop = 1000;
  $minTop = 0;

  // define maximum and minimum 'left' values    
  $maxLeft = 1000;
  $minLeft = 0; 


  $styleProperties = array(
    'position:absolute',
    'top:'.rand($minTop,$maxTop) . 'px',
    'left:'.rand($minLeft,$maxLeft) . 'px'
  );

  return ' style="'.implode(';',$styleProperties).'" ';
}

该函数将返回与此类似的字符串 -

style="position:absolute;top:10px; left:45px;"

现在，您只需为页面上的每个图像调用此函数 -

<a <?php echo generateRandomPositions();?> ><img src="...
<a <?php echo generateRandomPositions();?> ><img src="...
<a <?php echo generateRandomPositions();?> ><img src="...
<a <?php echo generateRandomPositions();?> ><img src="...

您的<a>标记现在将包含随机CSS定位参数，其图像将随之移动。

我相信你可以看到，这种使用PHP生成内联CSS属性的方法是一种向后的方式。 JavaScript可能是获得所需内容的最佳方式，还有其他答案可以涵盖它。您最初可以使用CSS隐藏元素，然后在设置随机定位后使用JavaScript显示它们。

参考文献 -

Answer 3

试试这个：

$images = array('1.gif', '2.gif', '3.gif');
$images = array_shaffle($images);
foreach ($images as $image) {
  echo "<img src='{$image}' />;
}

每次加载页面时都会更改元素的位置

3 个答案: