Javascript 和 jQuery 中图像上的可点击网格
我有一个图像（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 + "'> </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中测试时，鼠标的“点击、按住、移动”性能不佳，连续画线时出现间隙。 （抱歉，我的英语不是最好的；） 问候
I have an image (1000x1300 pixel) and want to overlay it with a grid with 10x10 pixel cells (so this would be 100x130 cells). Then there must be a way to click left mouse button, move over the grid an "mark" the underlying grid cells (i.e. change background color). At the time I have the following source code in 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 + "'> </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;
grid contains an 2-dimensional array (size is 130x100). I tried to create a grid basing on DIVs, but that's much slower than TDs. Has anyone some hint to gain performance of this snippet? When testing in Firefox 4, that "click, hold down and moving" of mouse is not much performant, there are gaps when drawing continously a line. (Sorry when my english is not the best ;)
Regards
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可能会发现使用 DOM 技术比创建字符串更容易：
实时演示
（只是基础版本，支持点击但不支持拖动）
You might find it easier to use DOM techniques rather than creating a string:
Live Demo
(Just a basic version, supports clicks but not drags)