Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   как сделать img zoom (https://javascript.ru/forum/events/30784-kak-sdelat-img-zoom.html)

cyber 16.08.2012 15:14

Цитата:

Сообщение от Deff (Сообщение 197824)
cyber,
между старыми координатами мыши от угла overlow и приращением ширины и высоты (*или уменьшением - тогда получецо авто плюс)

а что имеется в виду под старым координатами?

Deff 16.08.2012 15:16

cyber,
Мну тут прикинул - шо про координаты курсора - не АЙС - ща схему набросаю

Deff 16.08.2012 15:31

Нам нужно фиксировать положение центральной точки (желтое O) относительно центра Окна ( хотя в Гугле - обычно фиксируется положение Пойнтера*выделенной метки, если он есть в текущем окне)



Занчит вычисляешь отступы текущего центра и при зумме увеличиваешь на половину приращения ширины lеft(или высоты для top)

Вычисляем приращение:

widthOld = $("#wrapper").width() /это текущая ширина
widthNew = $("#wrapper").width()*zoom /это будущая

DeltaX
(Приращение по Left) = (widthOld - widthNew)/2 (знак будет автоматический

Итог вставляем в wrapper{"margin-left":""+DeltaX +"px" }

cyber 16.08.2012 17:36

хм...
спасибо за подсказку, но у тебя не правильно, потому что ты опеределяеш центр относительно wrapper а в моем случае мне нужно центр относительно внешнего блока overflow.
пытался сделать так но что то все едит в верх
function fixedZoom () {

var zoomY = getHeight / (getHeight - step.height);
var zoomX = getWidth / (getWidth - step.width); 	

	var left = style().left*zoomX;
	var top = style().top*zoomY;
	
	 wrapper.css({
		 top: -top  + 'px',
		 left: -left+'px'
		 		
		 })
	
	}

Deff 16.08.2012 18:20

cyber,
Центр должен быть относительно визуального Окна просмотра - а центр wrapper может быть вообще за кадром (при большой ширине и просмотре картинки у левого края (или, наоборот - у края правого)

cyber 16.08.2012 18:26

Цитата:

Сообщение от Deff (Сообщение 198049)
cyber,
Центр должен быть относительно визуального Окна просмотра - а центр wrapper может быть вообще за кадром (при большой ширине и просмотре картинки у левого края (или, наоборот - у края правого)

да, но у тебя получается что расчищается центр wrapper

cyber 16.08.2012 18:33

вот как работает http://cyberua.16mb.com/files/zoom.html
вот функция
function fixedZoom () {

var zoomY = getHeight /(getHeight - step.height);
var zoomX = getWidth / (getWidth - step.width); 	

	var left = ((getWidth - step.width) - (getWidth * zoomX))/2;
	var top = ((getHeight - step.height) - (getHeight * zoomY))/2;
	
	 wrapper.css({
		 top: top  + 'px',
		 left: left+'px'
		 		
		 })
	
	}

cyber 16.08.2012 19:32

может я зум не правильно рассчитываю?!

Deff 16.08.2012 19:39

cyber,
По моему - так
var left = ((getWidth + step.width) - (getWidth * zoomX))/2;
var top = ((getHeight + step.height) - (getHeight * zoomY))/2;

И всё таки тут не left - a margin - left - Движение от зума - лучше делать независимым (для начала

cyber 16.08.2012 19:50

Цитата:

Сообщение от Deff (Сообщение 198074)
cyber,
По моему - так
var left = ((getWidth + step.width) - (getWidth * zoomX))/2;
var top = ((getHeight + step.height) - (getHeight * zoomY))/2;

почему так?
если getWidth/Height это размеры после увелечения, значит getHeight - step.height это уже старый размер.
Цитата:

Сообщение от Deff (Сообщение 198074)
И всё таки тут не left - a margin - left - Движение от зума - лучше делать независимым (для начала

а как тогда его перемещать если оно будет смещено?


Часовой пояс GMT +3, время: 19:43.