这是我的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/