А, понял.
При position=fixed по умолчанию устанавливается по умолчанию top=0; left=0, а если у меня картинка разрезается посередине окна, то эти разрезанные части изображения просто не видно.
В jQuery UI Explode это как-то решили. Назначай любой position, сдвигай через margin / padding / top, left куда угодно, всё равно всё разрезается правильно.
Компромисс - сделать explode только для картинок, игнорировать стили, тупо брать src.
function Explode( elem, num ) {
num = num || 3;
var pos = elem.getBoundingClientRect();
var top = pos.top;
var left = pos.left;
var width = Math.round( elem.clientWidth / num );
var height = Math.round( elem.clientHeight / num );
for ( var i = 0; i < num; i++ ) {
for ( var j = 0; j < num; j++ ) {
var tile = document.createElement( "DIV" );
document.body.appendChild( tile );
tile.style.position = "fixed";
tile.style.width = width;
tile.style.height = height;
tile.style.top = top + height * i;
tile.style.left = left + width * j;
tile.style.overflow = "hidden";
var tileContent = document.createElement( "IMG" );
tile.appendChild( tileContent );
tileContent.src = elem.src;
tileContent.height = elem.clientHeight;
tileContent.width = elem.clientWidth;
tileContent.style.marginTop = -height * i;
tileContent.style.marginLeft = -width * j;
Explode.animate( tile, left + width * j, top + height * i, Explode.direction( i, j, num ) );
}
}
elem.parentNode.removeChild( elem );
}
Explode.animate = function ( elem, posX, posY, dir ) {
var mY = dir[0];
var mX = dir[1];
var start = new Date().getTime();
setTimeout( animate, 10 );
var toY = posY - 50 * mY;
var toX = posX + 50 * mX;
function animate () {
var m = (new Date().getTime() - start) / 500;
if (m > 1) m = 1;
elem.style.top = posY + (toY - posY) * m;
elem.style.left = posX + (toX - posX) * m;
elem.style.opacity = 1 - m;
if (m < 1) setTimeout( animate, 10 );
}
};
Explode.direction = function ( i, j, num ) {
return [ (num-1) / 2 - i, j - (num-1) / 2 ]
};