Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 05.02.2017, 15:40
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

А, понял.
При 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 ]
};
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
У меня есть вопрос rzhsasha Firefox/Mozilla 29 08.12.2010 18:48
Что-то onmouseup у меня не хочет правильно работать. vahrusha Элементы интерфейса 5 10.04.2010 00:00
У кого есть код этих задач? скиньте! а то до меня не доходит немного Kirulezzz Общие вопросы Javascript 7 03.12.2009 00:34
Простой скрипт просто сводит меня с ума :((( 2dkott Элементы интерфейса 3 25.08.2009 21:49
Крик души у меня Eugene Общие вопросы Javascript 1 04.07.2009 10:57