А, понял.
При 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 ] }; |
Часовой пояс GMT +3, время: 02:35. |