[JS 문제] 이미지 확대, 축소 문제

Minha Sohn·2022년 12월 12일
0

[JS] 문제 풀이

목록 보기
2/2

이미지 요소에 마우스 이벤트를 이용하여 마우스를 올리면 이미지를 확대하고, 마우스를 떼면 축소하는 기능을 구현하는 문제이다.

** html 문서는 작성 되어 있다고 가정하고, 자바스크립트 문서만 구현

const rabbit = document.getElementsByClassName("zoom-img")[0];

function zoomIn() {
  rabbit.style.transform = "scale(2)";
  rabbit.style.transition = "all 0.5s";
}

function zoomOut() {
  rabbit.style.transform = "scale(2)";
  rabbit.style.transition = "all 0.5s";
}

rabbit.addEventListener("mouseenter", zoomIn);
rabbit.addEventListener("mouseleave", zoomOut);

주요 함수

img.style.transform

img.style.transform = 'scale(n)'
: n배 만큼 이미지의 사이즈 변경

mouseenter & mouseleave

마우스를 올렸을 때 발생하는 이벤트: mouseenter
마우스를 내렸을 때 발생하는 이벤트: mouseleave

profile
개발자를 꿈꾸는 코린이!

0개의 댓글