Evgeniya
Новичок
Здравствуйте! На странице следующая структура: слева большой блок, а справа маленькие блоки с превью изображения. При клике на превью изображение исходного размера появляется в большом блоке слева. В этом блоке мы видим только часть изображения, а остальную часть можем смотреть, когда водим курсором внутри блока.
Вот код, который ловит событие .mousemove() и выполняет действия
$("#big_photo").mousemove(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
$("#big_photo img").css({"position":"relative","left":"-"+relativeX+"px","top":"-"+relativeY+"px"});
});
Все работает, но, когда я дохожу курсором до края блока, то я не вижу конец изображения. Оно показывается не полностью. В выражении с подсчетом координат мне нужно еще учитывать координаты самого изображения, но записать правильно у меня не получается. Если есть у кого идеи, скажите, пожалуйста. Буду благодарна! =)
Вот код, который ловит событие .mousemove() и выполняет действия
$("#big_photo").mousemove(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
$("#big_photo img").css({"position":"relative","left":"-"+relativeX+"px","top":"-"+relativeY+"px"});
});
Все работает, но, когда я дохожу курсором до края блока, то я не вижу конец изображения. Оно показывается не полностью. В выражении с подсчетом координат мне нужно еще учитывать координаты самого изображения, но записать правильно у меня не получается. Если есть у кого идеи, скажите, пожалуйста. Буду благодарна! =)
