티스토리 뷰

IT tech Coding/javascript

자바스크립트로 줌인 줌아웃 만들어 보자, ZOOM IN ZOOM OUT 어렵지 않아요~~

Coding Life 2020. 4. 13. 13:53
반응형
function zoomin() {
     var myImg = document.getElementById("map");
     var currWidth = myImg.clientWidth;
     if (currWidth == 2500) return false;
     else {
       myImg.style.width = (currWidth + 100) + "px";
     }
}

function zoomout() {
     var myImg = document.getElementById("map");
     var currWidth = myImg.clientWidth;
     if (currWidth == 100) return false;
     else {
       myImg.style.width = (currWidth - 100) + "px";
     }
}

세계지도를 줌인 줌아웃하면서 볼 수 있는 웹사이트를 만든다면 어떨까?

상상을 현실로 만드는 것이 우리 웹사이트 기술자들의 꿈 아닐까요?

자바스크립트에 지식이 조금이라도 있는 분이라면 어렵게 느껴지지 않을 정도의 코드 같습니다.

 

ZOOM IN은 최대치가 없게 설정을 해 두웠고, ZOOM OUT은 기본크기로 제한되게 만든 코드입니다.

자바스크립트 고수들의 멋진 코드들은 결국 새롭게 시도하려는 분들에게 큰 도움이 됩니다.

 

이것이 바로 라이브러리겠지요^^

*body {
     margin: 0;
}

#navbar {
     overflow: hidden;
     background-color: #099;
     position: fixed;
     top: 0;
     width: 100%;
     padding-top: 3px;
     padding-bottom: 3px;
     padding-left: 20px;
}

#navbar a {
     float: left;
     display: block;
     color: #666;
     text-align: center;
     padding-right: 20px;
     text-decoration: none;
     font-size: 17px;
}

#navbar a:hover {
     background-color: #ddd;
     color: black;
}

#navbar a.active {
     background-color: #4CAF50;
     color: white;
}

.main {
     padding: 16px;
     margin-top: 30px;
     width: 100%;
     height: 100vh;
     overflow: auto;
     cursor: grab;
     cursor: -o-grab;
     cursor: -moz-grab;
     cursor: -webkit-grab;
}

.main img {
     height: auto;
     width: 100%;
}

.button {
     width: 300px;
     height: 60px;
}

진짜 움직이는 자바스크립트 코드

<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>

<body>

     <div id="navbar">
       <button type="button" onclick="zoomin()"> Zoom In</button>
       <button type="button" onclick="zoomout()"> Zoom Out</button>
     </div>

     <div class="main dragscroll">
       <img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
     </div>

 

실제로 실행하면 아래와 같은 화면이 나오고, 줌인 줌 아웃이 된다는 것을 알 수 있습니다.

 

줌인 했을때의 이미지
줌 아웃했을때의 이미지

 

이를 활용해서 멋진 자바스크립트 프로그램을 완성하시길 바랍니다.

 

 

반응형
저작자표시

'IT tech Coding > javascript' 카테고리의 다른 글

jexcel에서 toast UI grid로 웹사이트 변경작업하기  (0) 2021.12.12
[자바스크립트] 간단히 CSV파일 다운로드 만들어 보기  (0) 2021.11.28
php 작성된 배열을 자바스크립트에서 불러오는 방법  (0) 2020.02.20
javascript html 폼의 submit 전송을 자바스크립트로 구현하는 방법  (0) 2019.07.28
자바스크립트에서 php함수 호출해 보자구요~  (0) 2019.07.23
댓글