Перемещение увеличенного изображения на mousemove

Question

Я создаю свою собственную функцию масштабирования. Я заменяю изображение для изображения размера x2, которое должно быть подвижным при щелчке. Однако движение вызывает у меня проблемы. Я объединил некоторый код со всей сети. Он работает, но не только движется влево и вниз. Я бы хотел, чтобы он перемещался с помощью мыши, и изображение было сосредоточено на мыши, а также ограничивало размеры окружающего его элемента. У кого-нибудь есть мысли? Ссылка: http://bigideaadv.com/pic_site/?p=95

jQuery("div.zoom2 img.rsImg2").mousemove(function(e) { 
     var zoom = jQuery(this); 
     var position = zoom.position(); 

     //console.log(position); 

     jQuery(".rsImg2").css({"left" : position.left, "top" : position.top}); 

     // the first parameter (e) is automatically assigned an event object 

     var parentOffset = jQuery(this).parent().offset(); 
     //or $(this).offset(); if you really just want the current element's offset 
     var relX = e.pageX - parentOffset.left; 
     var relY = e.pageY - parentOffset.top; 

     jQuery(".rsImg2").css({"left" : relX, "top" : relY}); 
    }); 

Answer 1

Это трудно отлаживать это на вашем сайте, это поможет, если вы можете создать jsFiddle этого.

Однако, я думаю, проблема в том, что вы меняете положение img, которое запускает событие mousemove. Это перемещает элемент img в сторону от курсора мыши, поэтому событие больше не будет срабатывать, если вы не вернетесь обратно в img (вправо или вниз).

Вместо этого попробуйте стрелять событие на родителе

jQuery("div.zoom2").mousemove(function(e) { 

Вам придется изменить некоторые JQuery, чтобы указать на правильные элементы. Кроме того, вы уверены, что не хотите устанавливать отрицательное значение движения курсора? Нравится так:

jQuery(".rsImg2").css({"left" : -relX, "top" : -relY}); 

Или что-то похожее на это. Играйте с ним. Если вы создаете jsFiddle, мы можем помочь немного лучше =)

Удачи вам!