Масштабированное изображение не отображается правильно в нижнем правом углу и используется в более крупном масштабе

Question

Я пробовал код увеличителя изображения для части альбома моего блога.
С 1.5data-scale изображение id=album показано правильно, когда оно витает в верхнем левом углу.
Но в нижнем правом углу вместо этого отображается фон. Кроме того, когда я использую 2.5data-scale, изображение мигает, пока курсор движется по нему.
Я считаю, что это проблема .on('mousemove', function(e), алгоритм в ней трудно изменить.
Я хочу, чтобы код работал как оригинальный. Пожалуйста, помогите мне изменить его, спасибо большое!

My test code
Original code

Answer 1

На самом деле, когда ваше перемещение изображения в transform-origin ваше движении он быстро (вы используете высоту и ширину большого изображения).

Так решение разделить ваш фактор движения вашего шкала:

$(this).css({'transform-origin': 
     ((e.pageX - $(this).offset().left)/$(this).width()) 
      * 100/$(this).attr('data-scale') + '% ' 
    + ((e.pageY - $(this).offset().top)/$(this).height()) 
      * 100/$(this).attr('data-scale') +'%'}) 

И ваш jsfiddle обновления: https://jsfiddle.net/wpnubmah/