Я пытаюсь реализовать эффект увеличения изображения, немного похожий на то, как работает масштабирование с Google Maps, но с сеткой изображений с фиксированным положением.
Я загрузил пример того, что у меня пока есть:
http://www.dominicpettifer.co.uk/Files/MosaicZoom.html
(использует преобразования CSS3, поэтому работает только с Firefox, Opera, Chrome или Safari)
Используйте колесо мыши, чтобы увеличивать / уменьшать масштаб. Источник HTML - это, в основном, внешний div с внутренним div, и этот inner-div содержит 16 изображений, расположенных с использованием абсолютной позиции. В основном это будет фото-мозаика.
У меня есть бит масштабирования, работающий с использованием CSS3-преобразований:
$(this).find('div').css('-moz-transform', 'scale(' + scale + ')');
... однако я полагаюсь на положение X / Y мыши на внешнем элементе div для увеличения, где находится курсор мыши, аналогично тому, как работает Google Maps. Проблема заключается в том, что если вы увеличиваете изображение вправо, перемещаете курсор в нижний / левый угол и снова увеличиваете масштаб, вместо увеличения до нижнего / левого угла изображения, оно увеличивается до нижней / левой части всей мозаики , Это приводит к тому, что вы, кажется, прыгаете вокруг мозаики, когда вы увеличиваете масштаб, перемещая мышь, даже немного.
В этом-то и проблема, я хочу, чтобы зум работал точно так же, как Google Maps, где он точно изменяет положение курсора мыши, но я не могу обойти математику для вычисления источника преобразования: Y значения правильно. Пожалуйста, помогите, застрял на этом в течение 3 дней.
Вот полный список кодов для события колеса мыши:
var scale = 1;
$("#mosaicContainer").mousewheel(function(e, delta)
{
if (delta > 0)
{
scale += 1;
}
else
{
scale -= 1;
}
scale = scale < 1 ? 1 : (scale > 40 ? 40 : scale);
var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top;
$(this).find('div').css('-moz-transform', 'scale(' + scale + ')')
.css('-moz-transform-origin', x + 'px ' + y + 'px');
return false;
});