jQuery effet de grille d'image

Question

J'ai une image assise sur une page que je veux créer une superposition de type grille (qui couvre l'image avec un remplissage noir) qui sera partitionné en 50x50 pixels (quelle que soit la taille, tbh) carrés.

Les carrés de la grille se retourneront ensuite, un à la fois, dans des positions aléatoires révélant l'image en dessous. La seule façon que je peux envisager d'accomplir ceci serait de créer tout un tas de carrés de la grille et de les superposer sur l'image avec jQuery, puis retourner chaque carré d'image individuellement. Ceci, cependant, serait une douleur dans le cul. Faire tout cela dynamiquement dans jQuery est ce que j'espère accomplir.

Des idées?

Answer 1

Vous pouvez créer des carrés de grille dans une boucle en utilisant jQuery comme ceci:

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