꾸준히 안타치기

이미지확대 축소 본문

Web/인터렉티브웹

이미지확대 축소

글자줍기 2021. 9. 6. 20:03
반응형

https://codingbroker.tistory.com/63

 

[HTML, javascript] 마우스 오버시 HTML 요소(이미지, div 등) 확대(zoomIn) 하는 방법

두가지 방법으로 살펴봅니다. 1. width와 height 변경 2. transform의 scale() 적용 다음과 같이 container 내부에 3개가 있습니다. 1. width와 height 변경 이미지의 width와 height를 직접 변..

codingbroker.tistory.com

<!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-city {
        width: 500px;
        height: 280px;
      }
    </style>
  </head>
  <body>
    <div class="container">
        <!-- 이미지1  onmouseenter, onmouseleave 핸들러에 달아줍니다.-->
        <!-- onmouseenter는 마우스가 올라갔을때 실행, onmouseleave는 마우스를 내렸을시 실행 -->
      <img
        class="img-city"
        src="./upload/IMG_8497.jpg"
        onmouseenter="zoomIn(event)" 
        onmouseleave="zoomOut(event)"
      />
      <!-- 이미지2 -->
      <img
        class="img-city"
        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>
반응형

'Web > 인터렉티브웹' 카테고리의 다른 글

html 상하좌우로 흐르는 텍스트 예제  (0) 2021.10.15
Node.JS  (0) 2021.08.16
유용한 10가지 배열 함수들. Array APIs  (0) 2021.05.18
Drag event  (0) 2021.05.02
그림판  (0) 2021.04.20
'Web/인터렉티브웹' Related Articles more
Comments