Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Меня троллит джаваскрипт (https://javascript.ru/forum/misc/67155-menya-trollit-dzhavaskript.html)

Diphenyl Oxalate 05.02.2017 15:40

А, понял.
При 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.