개발노예 코드와 일상

이미지 확대기능을 추가해달라는 요청이다

오픈된 코드가 많아서 작업은 어렵지않았다

javacsript 코드와 css 정도만 추가해주면 된다

이미지 해상도가 약간 영향을 미치긴하겠지만 크게 차이는없는듯?

일단 코드는

var target = $('.target');
//1
var zoom = target.data('zoom');

$(".target_wrap")
.on('mousemove', magnify)
.prepend("

")
.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"
    });
}

}

//

-- css

/* 감싸는 div /
.target_wrap { position: relative; margin: 0 auto; width: 100%;}
/ 확대될 타겟이미지/
.target { display: block; width: 100%;}
/ 돋보기 */
.magnifier { width: 300px; height: 300px; position: absolute; border-radius: 100%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 3px 3px rgba(0, 0, 0, 0.25); display: none; z-index: 10000;}