자바스크립트 돋보기 기능 구현 3

JavaScript/jQuery 돋보기 3

마지막 단계로 이전 포스팅에서 구현했던 돋보기 모양을 가져가면서, 원하는 배율을 조정하는 기능을 구현합니다.

지난 포스팅에서 아주 약간만 손대보겠습니다.

HTML / CSS

역시 지난 포스팅과 완전히 같은 구조고, 배율로 사용할 data-zoom 속성만 추가했습니다. 3배로 놓아보고..

CSS부분은 지난 포스팅에서 건드리지 않았으니 그대로 쓰면 되겠습니다. 

<div class="wrap">
    <img class="target" src="https://i.imgur.com/zEZCgJC.jpg" data-zoom="3" />
</div>

JS

변경/추가된 부분은 딱 3군데입니다. 주석으로 숫자가 달린 부분입니다. 

1. 배율로 설정할 data-zoom 값을 가져옵니다.
2. background-size를 활용해 원하는 배율만큼 이미지를 확대해서 복사합니다.
3. 저번엔 이 부분에서 원본이미지 크기를 활용하느라 타겟너비를 나눈 뒤 naturalWidth를 곱하는 방법을 썼는데, 이번엔 이미 background-size로 이미지가 확대되어 있으므로 마우스 좌표 또한 배율만큼만 곱해주면 해결됩니다.

$(function () {
 
    var target = $('.target');
    //1
    var zoom = target.data('zoom');
 
    $(".wrap")
        .on('mousemove', magnify)
        .prepend("<div class='magnifier'></div>")
        .children('.magnifier').css({
            "background": "url('" + target.attr("src") + "') no-repeat",
            // 2
            "background-size": target.width() * zoom + "px " + target.height() * zoom+ "px"
        });
 
    var magnifier = $('.magnifier');
 
    function magnify(e) {
 
        // 마우스 위치에서 .magnify의 위치를 차감해 컨테이너에 대한 마우스 좌표를 얻는다.
        var mouseX = e.pageX - $(this).offset().left;
        var mouseY = e.pageY - $(this).offset().top;
 
        // 컨테이너 밖으로 마우스가 벗어나면 돋보기를 없앤다.
        if (mouseX < $(this).width() && mouseY < $(this).height() && mouseX > 0 && mouseY > 0) {
            magnifier.fadeIn(100);
        } else {
            magnifier.fadeOut(100);
        }
 
        //돋보기가 존재할 때
        if (magnifier.is(":visible")) {
 
            // 3
            var rx = -(mouseX * zoom - magnifier.width() /2 );
            var ry = -(mouseY * zoom - magnifier.height() /2 );
 
            //돋보기를 마우스 위치에 따라 움직인다.
            //돋보기의 width, height 절반을 마우스 좌표에서 차감해 마우스와 돋보기 위치를 일치시킨다.
            var px = mouseX - magnifier.width() / 2;
            var py = mouseY - magnifier.height() / 2;
 
            //적용
            magnifier.css({
                left: px,
                top: py,
                backgroundPosition: rx + "px " + ry + "px"
            });
        }
    }
});

결과

이제 원본 이미지의 크기를 고려할 필요 없이, 원하는 배율로 사진을 확대할 수 있게 되었습니다. 

한 번 윌리를 찾아볼까요? 작동하지 않으면 Rerun 버튼을 누르시면 됩니다. 

참고

w3school에 이 돋보기 기능 관련 글이 있어요. 

조금 더 복잡하게 구현되어있긴 한데 바닐라 자바스크립트로 되어 있습니다. 관심있으면 참고해보는 것도 좋겠습니다.

포스팅에 사용한 전체 코드 : https://github.com/SaintSilver/Magnifying-Glass

Demo : https://saintsilver.github.io/Magnifying-Glass/index3.html