[JavaScript] 이미지확대축소

javascript를 이용하여 이미지확대 축소를 할 수 있다.

 

코드예시

html

css

js

let tg = document.getElementsByClassName("tg")[0];
let imgPath = document.getElementsByClassName("tg")[0].getAttribute("data-image");

let photo = document.getElementsByClassName("photo")[0];
photo.style.backgroundImage = `url(${imgPath})`;

//이미지 확대 (마우스 갖다댐)
tg.addEventListener("mouseover", function(){
    photo.style.transform = `scale(2)`; //2배확대
})

//이미지 축소 (마우스 벗어남)

tg.addEventListener("mouseout", function(){
    photo.style.transform = `scale(1)`; //크기복원
})

//마우스 따라 그림 이동
tg.addEventListener("mousemove", function(element){
// (현재마우스위치 - 이미지 기준좌표) / 기준너비 (최초 0, 0)
    let oriX = ((element.pageX - this.offsetLeft) / this.offsetWidth) * 100; 
    let oriY = ((element.pageY - this.offsetTop) / this.offsetHeight) * 100;
    photo.style.transformOrigin = `${oriX}% ${oriY}%`; //이미지의 기준점을 새로 설정한 위치로 변경
})