본문 바로가기
JavaScript

[JavaScript]마우스 오버시 이미지 확대하기

by teamnova 2021. 11. 19.

이번 시간에는 마우스 오버시 이미지를 확대를 진행해보겠습니다.

독산동 복순이 

https://stickode.com/detail.html?no=2583 

 

스틱코드

 

stickode.com

스틱코드에서 하단 소스를 즐겨찾기 해주세요.

 

html안에  script를  작성을 해보았습니다.

script부분만 떼서 따로 적용을 하셔도 되고, 그대로 사용하셔도 됩니다.

고양이 이미지박스 두개를 만들어 줍니다. 

header안에 기본적인 html,body style을 만들어줍니다. 

<!DOCTYPE html>
<html>
  <head>
      <!-- 박스스타일을 잡아줍니다. -->
    <style>
      html, body {
        margin: 0;
        width: 100%;
        height: 100%;
      }
      /* 이미지박스설정 */
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
      }
      /* 이미지사이즈 설정 */
      .img-cat {
        width: 500px;
        height: 280px;
      }
    </style>
  </head>

 

이미지1  onmouseenter, onmouseleave 핸들러에 달아줍니다.
 onmouseenter는 마우스가 올라갔을때 실행되고, onmouseleave는 마우스를 내렸을시 실행 됩니다.

마우스올라가면 확대, 마우스 내려가면 다시 원래 상태로 돌아갑니다.

 <body>
    <div class="container">
        <!-- 이미지1  onmouseenter, onmouseleave 핸들러에 달아줍니다.-->
        <!-- onmouseenter는 마우스가 올라갔을때 실행, onmouseleave는 마우스를 내렸을시 실행 -->
      <img
        class="img-cat"
        src="./upload/IMG_8497.jpg"
        onmouseenter="zoomIn(event)" 
        onmouseleave="zoomOut(event)"
      />
      <!-- 이미지2 -->
      <img
        class="img-cat"
        src="./upload/IMG_8498.jpg"
        onmouseenter="zoomIn(event)"
        onmouseleave="zoomOut(event)"
      />
    
    </div>
   
  </body>
<!-- transform의 scale() 속성을 변화시키면 옆의 사진들에게 영향을 주지 않고 해당 이미지만 확대됩니다. -->
  <script>
    function zoomIn(event) {
      event.target.style.transform = "scale(1.2)"; //1.2배 확대
      event.target.style.zIndex = 1;
      event.target.style.transition = "all 0.5s";// 속도
    }
  
    function zoomOut(event) {
      event.target.style.transform = "scale(1)";
      event.target.style.zIndex = 0;
      event.target.style.transition = "all 0.5s";
    }
  </script>
  
</html>

 transform의 scale() 속성을 변화시키면 옆의 사진들에게 영향을 주지 않고

해당 이미지만 확대됩니다. 

 

< 전체소스 >

<!DOCTYPE html>
<html>
  <head>
      <!-- 박스스타일을 잡아줍니다. -->
    <style>
      html, body {
        margin: 0;
        width: 100%;
        height: 100%;
      }
      /* 이미지박스설정 */
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
      }
      /* 이미지사이즈 설정 */
      .img-cat {
        width: 500px;
        height: 280px;
      }
    </style>
  </head>
  <body>
    <div class="container">
        <!-- 이미지1  onmouseenter, onmouseleave 핸들러에 달아줍니다.-->
        <!-- onmouseenter는 마우스가 올라갔을때 실행, onmouseleave는 마우스를 내렸을시 실행 -->
      <img
        class="img-cat"
        src="./upload/IMG_8497.jpg"
        onmouseenter="zoomIn(event)" 
        onmouseleave="zoomOut(event)"
      />
      <!-- 이미지2 -->
      <img
        class="img-cat"
        src="./upload/IMG_8498.jpg"
        onmouseenter="zoomIn(event)"
        onmouseleave="zoomOut(event)"
      />
    
    </div>
  

  </body>
<!-- transform의 scale() 속성을 변화시키면 옆의 사진들에게 영향을 주지 않고 해당 이미지만 확대됩니다. -->
  <script>
    function zoomIn(event) {
      event.target.style.transform = "scale(1.2)";
      event.target.style.zIndex = 1;
      event.target.style.transition = "all 0.5s";
    }
  
    function zoomOut(event) {
      event.target.style.transform = "scale(1)";
      event.target.style.zIndex = 0;
      event.target.style.transition = "all 0.5s";
    }
  </script>
  
</html>

이미지를 강조하고 싶을때 사용해보세요!

 

https://stickode.com/detail.html?no=2583 

 

스틱코드

 

stickode.com

 

'JavaScript' 카테고리의 다른 글

[JavaScript] JavaScript 자식 요소 전부 삭제하기  (0) 2021.11.26
[JavaScript] 탭 메뉴 만들기  (0) 2021.11.20
[JavaScript] GET/POST 전송  (0) 2021.11.11
[JAVA][Android] Dagger2 익혀보기  (0) 2021.10.25
[javascript] 그림판 만들기  (0) 2021.09.25

관련글

티스토리툴바