jquery - 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>'));
}