반응형 모바일 개발을 하다가 화면에서 화살표 외 컨텐츠 내용 부분을
스와이프 할 경우 좌우로 움직일 수 있도록 하는 부분에 대한 내용이 필요해서 정리.
<div>
<div class="pop_bg"></div>
<div class="pop_wrapn"></div>
</div>
위에 div영역도 상세한 내용은 제외하고, 간단히 아래 js에서 사용하는 부분에 대해 구조만 확인할 수 있도록 작성했다.
var fn_open = function() {
// 팝업열기
};
var fn_close = function() {
// 팝업 닫기
};
var fn_getPrev = function() {
// 이전 내용
};
var fn_getNext = function() {
// 다음 내용
};
$(document).ready(function(){
$('.pop_area').on('touchstart', function() {
// 처음 터치한 영역의 X,Y 좌표
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
console.log('startX :: ' + startX);
console.log('startY :: ' + startY);
});
$('.pop_area').on('touchend', function() {
// 마지막 터치한 영역의 X,Y 좌표
endX = event.changedTouches[0].pageX;
endY = event.changedTouches[0].pageY;
console.log('endX :: ' + endX);
console.log('endY :: ' + endY);
if (startX > endX) {
// 오른쪽에서 왼쪽으로 스와이프
fn_getNext();
} else if (startX < endX) {
// 왼쪽에서 오른쪽으로 스와이프
fn_getPrev();
} else {
// X 좌표 시작과 끝이 같을 때
}
console.log(Number(startY) - Number(endY));
if (startY < endY && (Number(endY) - Number(startY)) > 50) {
// 위에서 아래로 스와이프
// 범위가 너무 작을 경우 좌우로 움직이면서 Y값이 달라질 수 있으므로
// 임의로 50의 값을 줌
fn_close();
}
});
$('.pop_bg').on('touchmove', function() {
// 팝업 화면 외 배경에서 행동이 일었을 경우
fn_close();
});
});
위의 내용만 보면 간단하긴 한데, 그래도 한 번 정리해두는 편이 좋을 것 같아서 각 함수 안에 소스는 지우고 올린다.
모바일의 경우 애니메이션 효과를 주는 경우가 많기 때문에 스와이프도 당연히 될거라고 생각하는 경우가 많아서
두가지가 함께 진행이 되는 경우가 많은 것 같다.
'알아가기 > 웹' 카테고리의 다른 글
radio 버튼 DIV 활성화 및 비활성화 / 라디오 버튼 클릭시 변경되지 않는 오류 (0) | 2017.10.12 |
---|---|
CSS를 이용하여 게시글 제목 말줄임표 사용하기 (0) | 2017.08.30 |
form에서 enctype="multipart/form-data"로 보낸 데이터를 request로 받기 (0) | 2017.08.11 |
JAVA에서 alert창 띄우기 (0) | 2017.08.11 |
JavaScript에서 URL Parameter 간단히 가져오기 (0) | 2017.04.19 |