Кликабельная сетка поверх изображения в Javascript и jQuery - PullRequest
Новая
       18

Кликабельная сетка поверх изображения в Javascript и jQuery

1 голос
/ 15 мая 2011

У меня есть изображение (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 «щелчок, удержание и перемещение» мыши не слишком эффективны, при непрерывном рисовании линии возникают пробелы.(Извините, когда мой английский не самый лучший;) С уважением

1 Ответ

6 голосов
/ 16 мая 2011

Возможно, вам будет проще использовать методы DOM, а не создавать строку:

Live Demo

(просто базовая версия,поддерживает щелчки, но не перетаскивает)

...