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

（只是一个基本版本，支持点击但不支持拖动）

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

1 个答案: