这是我的jsbin:http://jsbin.com/mipazizakafe/1/edit

我想做的是在div内绘制此图像



编码 :

function loademoji(RowCount,ColumnCount){
 var toAppend = "<div class='emojiContainer_div'><table  width='100%'>";
  for (i = 0; i < RowCount; i++) {
    toAppend += "<tr>";
    for (j = 0; j < ColumnCount; j++) {
        toAppend += "<td><div class='emojiIcon' style='background-position:" + RowCount + "px " + ColumnCount * i + "px;' ></div></td>";
    }
    toAppend += "</tr>";
}
toAppend += "</table></div>";
return toAppend;


}
RowCount是要绘制的行数,ColumnCount是要绘制的列数,
如您所见,我在绘制图像时遇到了麻烦,有人可以帮我修复算法吗

最佳答案

这是一个工作版本:http://jsbin.com/tepocevakolo/3/edit

您需要负背景位置才能向下/向右移动。

function loademoji(RowCount,ColumnCount){
   var toAppend = "<div class='emojiContainer_div'><table  width='100%'>";
    for (i = 0; i < RowCount; i++) {
        toAppend += "<tr>";
        for (j = 0; j < ColumnCount; j++) {
            toAppend += "<td><div class='emojiIcon' style='background-position: -" + j*17 + "px -" + i*17 + "px;' ></div></td>";
        }
        toAppend += "</tr>";
    }
    toAppend += "</table></div>";
    return toAppend;

}


编辑(更改为19-> 17)。另请注意,CSS稍加修改了width:17px; height:17px;

关于javascript - 计算JavaScript中绘制数组的正确算法时遇到麻烦,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25422225/

10-12 00:01
查看更多