РЕДАКТИРОВАТЬ: Я понимаю, что неправильно истолковал то, что вам нужно было сделать, но я все равно подумал, что это круто и может быть применено к вашей проблеме ...
См. Рабочую демонстрацию следующего & # x2192;
Я бросил это вместе в jQuery. Вместо этого я сделал каждый пиксель блоком 3х3, потому что в противном случае обработка займет слишком много времени. Кажется, что-то очень хорошо работает на стороне клиента, хотя я еще не тестировал IE.
<div id="w">
<img id="i" src="yourImage.jpg" width="300" height="300" />
</div>
$('#w').css({
width: $('#i').width(),
height: $('#i').height()
});
var htmlFrag = '',
id, ids = [],
removePix = function () {
if (ids.length) {
var rand = Math.floor(Math.random()*ids.length);
$('#'+ids[rand]).fadeOut(function(){
$(this).remove();
});
ids = ids.slice(0, rand).concat(ids.slice(rand+1));
setTimeout(removePix, 1);
}
};
for (var i = 0, len = $('#i').height(); i < len; i += 3) {
for (var j = 0, len = $('#i').width(); j < len; j += 3) {
id = 'pix'+j+'-'+i;
ids.push(id);
htmlFrag += '<div id="'+id+'" class="pix" ' +
'style="width:3px;height:3px;position:absolute;' +
'left:'+j+'px;top:'+i+'px;"></div>';
}
}
$('#w').html($('#w').html() + htmlFrag);
removePix();
См. Рабочий пример & # x2192;