4

5 つの画像(それぞれ 48px × 48px)を含む HTML ページがあります。ページが読み込まれるたびに、Web ページのランダムな場所に画像を表示したいと考えています。

これを実装する方法がわかりません。これには、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 
<?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 に答える
-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 に答える
-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 に答える