이미지 확대 JS JS (배경 이미지, img가 아님)

Question

내 자신의 이미지를 줌 JS 코드 (http://www.elevateweb.co.uk/image-zoom/examples#inner-zoom과 유사)로 작성하고 싶지만이 플러그인과 다른 모든 플러그인의 문제는 img 태그에 의존한다는 것입니다. 동일한 효과를 내기 위해 배경 이미지를 사용하고 싶습니다.

나는 jsFiddle을 만들었지 만, 나는 마우스 움직임을 재현하는 데 문제가있다. 당신이 마우스를 가져 가면 배경 이미지의 크기를 조정할 수 있다고 생각했는데 (JS를 통해 JS를 통해 더 큰 이미지로 바꿀 수 있음) 포인터를 따라가는 것이 아니라 이미지/컨테이너의 가장자리를 따라갈 수있는 방법을 찾지 못했습니다. .

https://jsfiddle.net/x69tk48s/

$('.inner').mousemove(function(e) { 
    $('.each-image .bg').offset({ 
     left: e.pageX, 
     top: e.pageY 
    }); 
}); 

$('.inner').on('mouseleave', function() { 
    $('.each-image .bg').css({ 
     left: 0, 
     top: 0 
    }); 
}); 

어떤 생각?

Answer 1

수학이 옳지는 않지만 여기에 대략적인 아이디어가 있습니다 : https://jsfiddle.net/3cebzudv/2/ (대략적인 아이디어를 얻으려면 왼쪽 상단에 마우스를 갖다 대는 것으로 시작하십시오).

기본적으로 마우스 이미지의 배경 이미지를 확대 한 다음 mousemove의 backgroundPosition 속성으로 위치를 변경하십시오.