학원에서 숙제로 만든 gallery 화면이다.
구현 기능은 생각보다 간단하다. 총 15개의 이미지를 한 줄에 5개씩 넣고, 같은 작업을 반복문으로 감싸서 페이지에 스크롤이 생길 정도로 이미지를 화면에 넣어주었다.
그리고 이미지를 클릭하면 이미지의 파일명이 새로운 div 상단에 나오고 하단에는 같은 이미지가 조금 더 크게 나오게 한다.
이미지가 클릭되면 실행되는 기능이 하나 더 있는데 자바 swing에서 modal 기능을 구현하기 위해서 화면 전체를 감싸는 회색 div를 만들어서 이미지들이 클릭되는 걸 막았다.
마지막으로 지난번 수업에서 배운 div를 마우스로 드래그 하는 기능을 넣었다.
<body onload="setImage()">
<div id="mainDiv"></div>
<!-- 모달 -->
<div id="modal"></div>
<div id="bigShow">
<div id="fileName" onmousedown="moveStart()"></div>
<img src="../img/icon01.png" id="bigImage" onclick="bigShowClose()">
</div>
</body>mainDiv → 이미지
modal → function이 실행될때 뒤에 화면을 가려준 div
bigShow → 이미지 클릭시 나오는 새창(div)
fileName → 이미지의 파일명이 들어갈 자리
bigImage → 클릭시 크게 나올 이미지가 들어갈 자리
function setImage(){
var tag = "";
for(var j=0; j<3; j++){
for(var i=1; i<=15;i++){
tag += "<img src='../img/icon";
if(i<10){
tag +="0";
}
tag += i+".png' onclick='bigShowStart(this.src)'>";
}
}
document.getElementById("mainDiv").innerHTML = tag;
}먼저, mainDiv에 이미지를 세팅해준다. tag라는 변수를 사용해서 반복문에서 생성되는 이미지 경로를 계속 누적해준다.
15개의 이미지가 삽입되는 반복문을 이중반복문으로 4번 돌린다.
이미지 파일명이 9번까지는 앞에 0이 붙기때문에 if문을 활용한다.
이미지에 함수를 넣어주기위해서 onclick도 같이 넣어준다.
function bigShowStart(fileName){
//모달
var modal = document.getElementById("modal");
modal.style.display = "block";
//컨텐츠 높이만큼 모달 높이를 지정
// document.body.scrollHeight ; -> 모달의 높이를 지정하는 방법 1 -> 현재 마우스 스크롤 높이를 구하기
// document.documentElement.clientHeight -> 2. document의 내장 높이(바디의 높이)를 구하기
modal.style.height = document.body.scrollHeight +"px";
//큰이미지
//마우스 클릭 좌표구하기
var x = event.clientX - 250;
var y = event.clientY + window.scrollY;
var bigShow = document.getElementById("bigShow");
bigShow.style.display = "block";
bigShow.style.left = x+"px";
bigShow.style.top = y+"px";
document.getElementById("fileName").innerHTML = fileName.substring(fileName.lastIndexOf("/")+1);
document.getElementById("bigImage").src = fileName;
}이미지를 클릭하면 실행되는 함수이다.
우선 modal의 display가 none으로 세팅되어있기 때문에 화면에 보여지게끔 block으로 바꾼다.
modal도 div이기 때문에 넓이는 자동적으로 100%으로 세팅이되어진다. 그렇지만 높이는 지정해주어야하는데
여기에선, 2가지 방법으로 스크린의 높이를 구할 수 있다.
- document.body.scrollHeight → 현재 창에서 마우스 스크롤의 높이를 구해서 modal에 높이에 넣어줄 수 있다.
- document.documentElement.clientHeight → 현재 document의 높이를 구하는 방법이다(이 방법을 이용하면 전체 이미지를 감싸기에 부족한 높이가 나온다... 1번째 방법을 추천한다)
bigShowStart 함수에서 마우스 클릭이 일어난 좌표도 얻어와야한다. 왜냐면, 마우스 클릭이 발생한 위치에 bigShow를 나타나게 해야하기 때문이다.
event.clientX가 바로 마우스 클릭이 발생한 위치의 X좌표이다. 이걸 변수 x에 담아준다(변수에 담지않고 바로 left에 대입하면 엉뚱한 좌표가 나오는데 왜일까...?)
event.clientX에 250을 빼는 이유는 간단하다. 마우스 클릭이 일어난 곳에 bigShow가 나오는게 아니라 마우스 클릭이 일어난 곳에 bigShow div의 중앙이 오기 위해서다
다음은 top에 들어갈 Y좌표를 구했다. event.clientY에 window.scrollY(스크롤바의 위치)를 더해주는 이유가 있다.
이미지 파일들이 페이지를 넘어가면서 스크롤이 생긴다. 그리고 스크롤을 제일 밑으로 내린다음에 이미지를 클릭하면 마우스를 클릭한 위치가 아닌 다른 곳에 bigShow div가 나오는 결과가 생긴다.
그렇기 때문에 현재 마우스 스크롤 위치를 더해주면 올바른 위치에 div가 나온다.
이렇게 구해진 x, y 좌표를 bigShow div의 left, top으로 지정해준다.
function bigShowClose(){
document.getElementById("modal").style.display = "none";
document.getElementById("bigShow").style.display = "none";
}이미지를 클릭하고 bigShow div가 열리면 modal도 같이 열리면서 뒤에 이미지
bigShow 안에 들어있는 이미지를 클릭하면 창이 닫히는 함수를 준비하고 이미지가 들어이는 div에 onclick으로 걸어놓는다.
// div 이동===================================
var flag = false, bigX, bigY; //bigX -> 현재 div의 x, y 좌표
function moveStart(){//마우스 누른 상태일때
flag = true; //드래그가 시작되는걸 알려주는 변수
bigX = parseInt(document.getElementById("bigShow").style.left); //parseInt를 해줘서 "px"을 없애고 숫자로 받는다.
bigY = parseInt(document.getElementById("bigShow").style.top);
x = event.clientX;
y = event.clientY;
document.onmousemove = divMove; //document에 이벤트 작업핼때는 function에 ()가 없다.
}
function divMove(){
if(flag==true){
document.getElementById("bigShow").style.left = (event.clientX-x)+bigX+"px";
document.getElementById("bigShow").style.top = (event.clientY-y)+bigY+"px";
}
}
function divClose(){
flag = false;
}
document.onmouseup = divClose;flag는 마우스가 클릭되어진걸 알려주는 변수, divX,Y는 현재 bigShow div의 위치를 알려주는 변수다.
이미지의 파일명이 들어가는 위치에 마우스를 클릭하면 moveStart()가 시작되고 flag는 true(움직이게 허락) bigX,Y에는 현재 좌표가 담긴다.
x, y에는 마우스 클릭의 좌표가 담기고 document에 onmousemove 이벤트를 걸어서 움직일때마다 좌표가 수정되면서 bigShow div가 마우스를 따라가는 기능이 구현된다.(document에 이벤트를 걸때는 괄호()를 생략한다)
divMove()가 시작되고 flag가 true 즉 아직 왼쪽 클릭이 눌려있으면, bigShow의 Left에
(마우스에 끌려가는 좌표-처음 마우스 이벤트가 발생한 좌표) + bigShow div의 X좌표를 대입해준다.
그리고 다시 한번 document에 onmouseup(마우스 버튼에서 손이 떨어지면) 이벤트를 걸어서 드래그가 끝나는 시점에 flag가 false로 변하는 함수를 만들어준다.
이렇게하면 마우스를 놓으면 더 이상 bigShow div가 따라오지 않는다.
어디서든 쉽게 사용했던 창을 마우스로 드래그하는 기능 뒤에 이런 함수들이 숨어있는지 몰랐다..
'TIL' 카테고리의 다른 글
| [React]컴포넌트로 반복 작업 줄이기!! (0) | 2022.03.30 |
|---|---|
| ES6 find(), findIndex() 사용법을 알아보자! (1) | 2022.03.30 |
| ES6 Map, Filter, Reduce 기능을 알아보자 (0) | 2022.03.30 |
| java.lang.IllegalStateException: Cannot call sendError() after the response has been committed (0) | 2022.02.25 |
| (온더스팟) - 1. 개발 환경 구축(프로젝트 생성) (0) | 2022.01.10 |
