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