0

セット内の100個のアイコンを自動化しようとしています。それぞれ32pxx32pxの100個のアイコンを含む320pxx320pxの画像スプライトがあります。私が達成したいのは、アイコンのdivコードを100回再現できるphpループを作成することですが、そのループ内で、他のループを使用して画像スプライトの背景を配置します。私がする必要があるのは、最初の10のx座標を0から-288に32 pxインクリメントすることです。次に、xコードを0から-288にもう一度繰り返しますが、y座標を32pxインクリメントします。 、 等々。したがって、10個のアイコンの各行について、xは毎回32pxずつ増加し、その後0にリセットされ、y座標は合計100個のアイコンに達するまで10個のアイコンごとに1回増加します。合計100個のアイコンを正常にループする次のコードがありますが、ネストされたループを機能させることができません。これが理にかなっていることを願っています。

<?php
   for ($i=1; $i<=100; $i++) { ?>
   <div id="menu_icon_edit_cont">
      <div class="menu_icons" style="background-position: -<?= (x coordinate here) ?>px -<?= (y coordinate here) ?>px">
      </div>
   </div>
<? } ?>
4

2 に答える 2

1

$i単一のイテレータを簡単に座標に「変換」できます$y = floor($i/10); $x = $i%10;。次に、画像の幅（この場合は32）を掛けるだけで、完了です。

于 2012-12-24T04:27:38.310 に答える
1

これには多くの方法がありますが、最も読みやすく維持しやすいものを選択する必要があります。

初心者がよく犯す間違いは、自分がやりたいことを for ループで正確に模倣する必要があると思い込んでしまうことです (100 個のアイコンが必要な場合は、1 から 100 まで反復する必要があると想定します)。

あなたが本当に欲しいのは、次のような最終製品です。

    for ($y = 0; $y < 320; $y += 32) {
        for ($x = 0; $x > -320; $x -= 32) {
            //output your html using $x/$y
        }
    }

おそらく次のようになりますが、投稿したルートに進みます。

    for($i=0;$i<100;$i++){

        $x = $i%10 * -32;
        $y = floor($i/10)*32;

        //output your html using $x/$y
    }

私は最初の方法を好みます。なぜなら、それが何を意図しているのかがより明確だからです。

于 2012-12-24T05:00:54.853 に答える