ll55 ll55 - 11 days ago 5
Javascript Question

scaled image is not showing properly at bottom right corner and using larger scale

I was trying an image magnifier code for my blog' s album part recently.

With

1.5
data-scale
, the image
id=album
showed properly when hovering at top left corner.

But at bottom right corner, it shows the background instead. Besides, when I use
2.5
data-scale
, the image is flashing while the cursor is moving on it.

I believe it is the problem of
.on('mousemove', function(e)
, the algorithm in it is hard for me to alter.

I want the code works like the original one. Please help me modify it, thanks a lot!

My test code: https://jsfiddle.net/4ez932hf/2/

Original code: http://codepen.io/ccrch/pen/yyaraz

Answer

Actually when your moving your image in the transform-origin your moving it to quickly (you are using the height and width of the big image).

So a solution is to divide your movement factor by your scale :

$(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') +'%'})

And your jsfiddle updated : https://jsfiddle.net/wpnubmah/