jQuery image grid effect
I have an image sitting on a page that I want to create a grid type overlay (that covers the image with a black fill) which will be partitioned into 50x50 pixels (what ever size, tbh) squares.
The squares on the grid will then flip over, one at a time, 开发者_Python百科in random positions revealing the image below it.
The only way I can think of accomplishing this would be to create a whole bunch of grid squares and overlay them on the image with jQuery, then flip each image square individually. This, though, would be a pain in the ass. Doing this all dynamically in jQuery is what I'm hoping to accomplish.
Any ideas?
You can create grid squares in a loop using jQuery like this:
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>'));
}
精彩评论