0

我正在尝试自动化一组中的 100 个图标。我有一个 320 像素 x 320 像素的图像精灵，其中包含 100 个图标，每个图标为 32 像素 x 32 像素。我想要实现的是有一个 php 循环，我可以在其中复制图标 div 代码 100 次，但在该循环中，使用其他循环来定位图像精灵的背景。我需要做的是将x坐标增加32 px，前10个从0到-288，y坐标将为0。然后再次从0到-288重复x代码，但y坐标增加32px ， 等等。因此，对于每行 10 个图标，x 每次增加 32px，然后重置为 0，y 坐标每 10 个图标增加一次，直到总共达到 100 个图标。我有以下代码成功循环了总共 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 回答