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 |
