4

我有一个 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>
4

5 回答 5

1

这是一个相当简单的实现：http: //jsfiddle.net/Eu8wT/

$('div.randomizeme').css({
    top: Math.random() * 100+'%',
    left: Math.random() * 100+'%'
});​

要将其应用于多个元素：

$('div.randomizeme').each(function(){
    $(this).css({
        top: Math.random() * 100+'%',
        left: Math.random() * 100+'%'
    });
});​

没有 jQuery 的情况是一样的：

var elements = document.querySelectorAll('.randomizeme');
for (var i in elements) {
    elements[i].style.top = Math.random() * 100 + '%';
    elements[i].style.left = Math.random() * 100 + '%';
}​
于 2012-09-16T09:44:50.653 回答
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';
}

工作演示

于 2012-09-16T10:34:41.977 回答
-1

假设您已经将图像硬编码到 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 显示它们。

参考 -

于 2012-09-16T09:59:21.593 回答
-1 
<?php
$images= array(
    'twitter-48.png',
    'facebook-48.png',
    'plus-48.png',
    'github-48.png'
);
$keys= range(0, count($images)- 1);
shuffle($keys);
foreach($keys as $key) {
    print "<div>{$images[$key]}</div>";
}

编辑：

<?php
$images= array(
    array('href'=> 'http://twitter.com/', 'alt'=> 'Twitter', 'src'=> '/images/twitter-48.png'),
    array('href'=> 'http://facebook.com/', 'alt'=> 'Facebook', 'src'=> '/images/facebook-48.png'),
    array('href'=> 'https://plus.google.com/', 'alt'=> 'Google Plus', 'src'=> '/images/plus-48.png'),
    array('href'=> 'https://github.com/', 'alt'=> 'GitHub', 'src'=> '/images/github-48.png')
);
$keys= range(0, count($images)- 1);
shuffle($keys);
?>
<div class='location1'>
    <a href='<?php print $images[$keys[0]]['href']; ?>'><img alt='<?php print $images[$keys[0]]['alt']; ?>' src='<?php print $images[$keys[0]]['src']; ?>'></img></a>
</div>
<div class='location2'>
    <a href='<?php print $images[$keys[1]]['href']; ?>'><img alt='<?php print $images[$keys[1]]['alt']; ?>' src='<?php print $images[$keys[1]]['src']; ?>'></img></a>
</div>
<div class='location3'>
    <a href='<?php print $images[$keys[2]]['href']; ?>'><img alt='<?php print $images[$keys[2]]['alt']; ?>' src='<?php print $images[$keys[2]]['src']; ?>'></img></a>
</div>
<div class='location4'>
    <a href='<?php print $images[$keys[3]]['href']; ?>'><img alt='<?php print $images[$keys[3]]['alt']; ?>' src='<?php print $images[$keys[3]]['src']; ?>'></img></a>
</div>
于 2012-09-16T10:14:09.120 回答
-2

试试这个：

$images = array('1.gif', '2.gif', '3.gif');
$images = array_shaffle($images);
foreach ($images as $image) {
  echo "<img src='{$image}' />;
}
于 2012-09-16T09:45:37.000 回答