jQuery图像网格效果

Question

我有一个页面上的图像，我想创建一个网格类型覆盖（用黑色填充覆盖图像），它将被划分为 50x50 像素（无论大小，tbh）的正方形。

然后，网格上的正方形将翻转，一次一个，随机位置显示其下方的图像。

我能想到的唯一方法是创建一大堆网格方块并使用 jQuery 将它们覆盖在图像上，然后单独翻转每个图像方块。不过，这将是一件令人头疼的事情。我希望在 jQuery 中动态地完成这一切。

有什么想法吗？

Answer 1

您可以像这样使用 jQuery 在循环中创建方格：

var gridContainer = $('<div class="GridContainer"></div>')
    .width(yourImage.width())
    .height(yourImage.height());
for(var i = 0; i < squareCount; i++) {
    gridContainer.append($('<div class="GridCell"></div>'));
}