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