javascript - Javascript 和 jQuery 中图像上的可点击网格

Question

我有一张图片(1000x1300 像素)，我想用 10x10 像素单元格的网格覆盖它(所以这将是 100x130 单元格)。然后必须有一种方法可以单击鼠标左键，在网格上移动“标记”底层网格单元(即更改背景颜色)。当时我在 jQuery 中有以下源代码

$(window).ready(function() {
    $("body").mousedown(function() { mstate = 1; }).mouseup(function() { 
        mstate = 0; 
    });
    var container = document.getElementById("grid");
    var divs = "";
    for (var y in grid) {
        divs += "<tr>";
        for (var x in grid[y]) {
            var class = "cellinactive";
            if (grid[y][x]==1) class = "cellactive";
            else if (grid[y][x]==2) class = "cellreserved";
            else if (grid[y][x]==3) class = "cellsold";
            divs += "<td class='" + class + "'>&nbsp;</td>";
        }
        divs += "</tr>";
    }
    divs = "<table>" + divs + "</table>";
    container.innerHTML = divs;
    $("#grid td").css({ "opacity": "0.7" }).html("").mouseover(function() {
        if (mstate == 1) {
            if (rgb2hex($(this).css("background-color")) == "#ffff00") 
                $(this).css("background-color", "#0ff");
            else 
                $(this).css("background-color", "#ff0");
        }
    });
});

var grid = "";
var mstate = 0;

网格包含一个二维数组(大小为 130x100)。我试图创建一个基于 DIV 的网格，但这比 TD 慢得多。有没有人有一些提示来获得这个片段的性能？在Firefox 4中测试时，鼠标的“点击、按住、移动”性能不高，连续画线时有间隙。 (抱歉，我的英语不是最好的；) 问候

Answer 1

您可能会发现使用 DOM 技术比创建字符串更容易:

Live Demo

(只是一个基础版本，支持点击不支持拖动)