Javascript和jQuery中可點擊的網格覆蓋圖像

我有一個圖像（1000x1300像素），並希望用10x10像素單元網格覆蓋它（所以這將是100x130單元格）。然後必須有一種方法來點擊鼠標左鍵，在網格上移動一個「標記」底層網格單元（即改變背景顏色）。當時我在jQuery中有以下源代碼：Javascript和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;

網格包含一個2維數組（大小爲130x100）。我試圖創建基於DIV的網格，但這比TD要慢得多。有沒有人提示這個片段的表現？在Firefox 4中測試時，鼠標的「單擊，按住和移動」性能不高，在連續繪製線條時存在間隙。（對不起，我的英語不是最好的;）問候

來源

2011-05-15 rabudde

您可能會發現它更容易使用DOM技術，而不是創建一個字符串：

Live Demo

（只是一個基本的版本，支持點擊但不拖動）

來源

2011-05-15 20:07:57 drudge

看起來不錯。當然，它可以通過jQuery的DOM操作函數完成（我之前是這麼做的）。我現在已經創建了13000個表格單元或多或少的代碼片段;-) 但是現在我正在尋找一種方法來實現具有平滑行爲的這種拖曳功能（以便在繪製線上沒有間隙）。我注意到，只有鼠標懸停在這個13000單元上會導致客戶端的高CPU消耗。 – rabudde 2011-05-16 04:43:58

Javascript和jQuery中可點擊的網格覆蓋圖像

回答

相關問題