HTML - 터치이벤트, pc환경과 모바일 환경 알아내기

<div class="wrap">

<div class="header-wrap">
<header>
<h1 class="logo"><a href="#"><img src="images/logo.png"></a></h1>
<button class="m-open">
오픈
</button>
<nav>
<button class="m-close">
X
</button>
<ul class="main">
<li><a href="#">네비게이션1</a>
<ul class="drop">
<li><a href="#">네비1-1</a></li>
<li><a href="#">네비1-1</a></li>
<li><a href="#">네비1-1</a></li>
<li><a href="#">네비1-1</a></li>
<li><a href="#">네비1-1</a></li>
</ul>

</li>
<li><a href="#">네비게이션2</a>
<ul class="drop">
<li><a href="#">네비2-1</a></li>
<li><a href="#">네비2-1</a></li>
<li><a href="#">네비2-1</a></li>
<li><a href="#">네비2-1</a></li>
<li><a href="#">네비2-1</a></li>
</ul>
</li>
<li><a href="#">네비게이션3</a>
<ul class="drop">
<li><a href="#">네비3-1</a></li>
<li><a href="#">네비3-1</a></li>
<li><a href="#">네비3-1</a></li>
<li><a href="#">네비3-1</a></li>
<li><a href="#">네비3-1</a></li>
</ul>
</li>
<li><a href="#">네비게이션4</a>
<ul class="drop">
<li><a href="#">네비4-1</a></li>
<li><a href="#">네비4-1</a></li>
<li><a href="#">네비4-1</a></li>
<li><a href="#">네비4-1</a></li>
<li><a href="#">네비4-1</a></li>
</ul>
</li>
<li><a href="#">네비게이션5</a>
<ul class="drop">
<li><a href="#">네비5-1</a></li>
<li><a href="#">네비5-1</a></li>
<li><a href="#">네비5-1</a></li>
<li><a href="#">네비5-1</a></li>
<li><a href="#">네비5-1</a></li>
</ul>
</li>
</ul>
</nav>
</header>
</div>

<div class="section-wrap">
<section>

<a href="http://www.naver.com">섹션1</a>
</section>
<section>섹션2</section>
<section>섹션3</section>
<section>섹션4</section>
</div>
<footer>
푸 터
</footer>
</div>

</body>

</html>

css

@charset "utf-8";
html,body{
margin:0;
height:100%;
}
::-webkit-scrollbar{
display:none;
}
a{
color:#333;
text-decoration: none;
}
a:hover{
color:black;
}
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.wrap{
width:100%;
height:100%;
}
.section-wrap{
clear:both;
width:100%;
margin:auto;
padding:0 0;
background-color:#ededed;

}
section{
height:100%;
padding:0;
position:relative;
}
section:first-child{
padding-top:0;
}
section:nth-child(2){
background:pink;
}
section:nth-child(3){
background:cyan;
}
section:last-child{
background:purple;
}

.header-wrap{
width:100%;
position:static;
border-bottom:2px solid #eeeeee;
padding-bottom:10px;
background:white;
top:-70px;
left:0;
z-index:999;
padding:10px 0;
transition:0.5s;
float:left;
}
header{
width:100%;
max-width:1600px;
margin:auto;

z-index:10;

}
.logo{
width:150px;
margin:auto;

}
.logo img{
width:100%;
}
nav{
width:100%;
height:100%;
background:white;
position:fixed;
top:0;
transition:0.5s;
overflow:auto;
left:-100%;
z-index:9999;

}
.main{
width:90%;
text-align:center;
background:#333;
clear:both;
margin:auto;
transform:translateY(140px);
padding:10px;

}
.main>li{
list-style:none;
width:100%;
padding:2px 0;
position:relative;
text-align:left;

}
.main>li>a{
display:flex;
height:50px;
align-items: center;
color:white;
background:#222;
text-indent:10px;
}
.main>li>a.active{
background:black;
box-shadow:0px 0px 5px #999;
}

.m-open{
width:50px;
height:50px;
position:absolute;
top:10px;
left:10px;
}
.m-close{
width:30px;
height:30px;
float:right;
margin-right:10px;
margin-top:10px;
background:transparent;
border:none;
}

.drop{
width:100%;
background:white;
text-align:left;
text-indent:30px;
display:none;
}
.drop>li{
list-style:none;
}
.drop>li>a{
display:block;
padding:10px 0;
border-bottom:1px dashed #666;
}
.drop>li:last-child a{
border-bottom:none;
}
footer{
width:100%;
height:50px;
background:#333;
display:flex;
justify-content: center;
align-items: center;
color:white;
transition:0.5s;
position:static;
bottom:-70px;
transition:0.5s;
}
@media screen and (max-width:800px){
.header{
float:left;
}
}

js(모바일과 pc를 구분해서 처리, 모바일에서는 한 섹션씩 애니메이션)

$(document).ready(function() {
var winHeight, $lengh, winWidth;
var y=last=mlast=mslast=x=moveTop=count=moveLeft=0;
var drag;
var bool=false;

function ini(){
winHeight=$(window).height();
$lengh=$("section").length;
console.log("창의 높이 : "+winHeight);
winWidth=$(window).width();
drag=false;
$("section").css({
width:winWidth,
float:"none",
height:winHeight,
});
}


//모바일 운영체제 확인
var myAgent=navigator.userAgent.toLowerCase();
var mobile=["iphone","ipod","android","blackberry","window ce","nokia","webos","opera mine","sonyericsson","opera mobi","iemobile"];

for(i=0; i<mobile.length; i++){
if(myAgent.indexOf(mobile[i])>=0){
bool=true;

break;
}

}

if(bool){
mo();
}else{
pc();
}
function mo(){
ini();
size();

//터치
$("section").each(function(index){
console.log(index);
$(this).on('touchstart', function(e) {
count=index;
console.log("터치가 시작");
console.log(index)
return false;
});

});
$("section").on('touchmove', function(e) {

var event = e.originalEvent;

console.log("터치 이벤중입니다.")

console.log(event.touches[0].screenX) ;
console.log(event.touches[0].screenY);

y=event.touches[0].screenY;

console.log("y값 : "+y);

if(y>mlast){
console.log("내렸음");
moveTop=count-1;
$("footer").css({
position:"fixed",
"z-index":999,
bottom:0,
});
$(".header-wrap").css({
opacity:0,
});

}else{
console.log("올렸음");
moveTop=count+1;

$(".header-wrap").css({
position:"fixed",
top:0,
opacity:1
});

}
mlast=y;

$("html,body").stop().animate({
scrollTop:moveTop*winHeight
});
console.log("count : "+moveTop)
if(moveTop<=0 ){
$("footer").css({
position:"static",
bottom:-70
});
$(".header-wrap").css({
position:"static",
top:-70,
opacity:1
})
}


return false;

});

$("section").on('touchend', function(e) {

console.log("터치이벤트가 종료되었어요");
return false;

});

}

function pc(){
ini();
size();
console.log("pc")

$(window).scroll(function(){
var winScroll=$(window).scrollTop();
if(winScroll>last){
console.log("스크롤을 내리고 있음");
moveTop=count+1;
$("footer").css({
position:"static",
"z-index":999,
bottom:-70,

});
$(".header-wrap").css({
position:"fixed",
top:0
});

}else{
console.log("스크롤을 올리고 있음")
if(winScroll<100){
$("footer").css({
position:"static",
bottom:-70,
});
}else{
$("footer").css({
position:"fixed",
"z-index":999,
bottom:0,
});
}

$(".header-wrap").css({
position:"static",
top:-70
});
}
last=winScroll;
});
}

function size(){
$(window).resize(function(){
ini();
console.log(winWidth)
});
}

$(".m-open").click(function(){
$("nav").css({
left:0
});
});
$(".m-close").click(function(){
$("nav").css({
left:"-100%"
});
});
$(".main>li>a").click(function(){
if($(this).parent().find(".drop").is(":visible")){
$(".drop").slideUp();
}else{
$(".drop").slideUp();
$(this).parent().find(".drop").slideDown();
}
});

});

js2(마우스 이벤트만으로 처리)

$(document).ready(function() {
var winWidth, boxWidth;
var last=0;
var array=[];


function ini(){
winWidth=$(window).width();

boxWidth=$(".box1").width();
$(".box1, .box2, .box3").css({
height:boxWidth
});

}
$("section").each(function(index){
if(index<3){
array[index]=$(this).find(".box"+(index+1)).offset().top;
console.log(array[index]);
}
});
$(".box1").addClass("addTrans");

function size(){
$(window).resize(function(){
ini();
console.log(winWidth)
});
}
function $scroll(){
$(window).scroll(function(){
var winScroll=$(window).scrollTop();
if(winScroll>last){
console.log("스크롤을 내리고 있음");
$("footer").css({
position:"static",
"z-index":999,
bottom:-70,

});
$(".header-wrap").css({
position:"fixed",
top:0
});

// 각 섹션에 있는 박스 애니메이션
if(winScroll+600>array[0] && winScroll<array[1]-600){

}else if(winScroll+600>array[1] && winScroll<array[2]-600){
$(".box1").removeClass("addTrans");
$(".box2").addClass("addScale");

}else if(winScroll+600>array[2]){
$(".box2").removeClass("addScale");
$(".box3").addClass("addMove");
}else if(winScroll<array[2]-600){
$(".box3").removeClass("addMove");
}

}else{
console.log("스크롤을 올리고 있음")
if(winScroll<100){
$("footer").css({
position:"static",
bottom:-70,
});
}else{
$("footer").css({
position:"fixed",
"z-index":999,
bottom:0,
});
}

$(".header-wrap").css({
position:"static",
top:-70
});

// 각 섹션에 있는 박스 애니메이션
if(winScroll<array[0] ){
$(".box1").addClass("addTrans");
$(".box2").removeClass("addScale");
}else if(winScroll+600>array[1] && winScroll<array[2]-400){
$(".box2").addClass("addScale");
$(".box3").removeClass("addMove")

}else if(winScroll+600>array[2]){
$(".box3").addClass("addMove")
}else{

}
}
last=winScroll;
});

}

function pc(){
size();
console.log("pc")
$scroll();


}
pc();

$(".m-open").click(function(){
$("nav").css({
left:0
});
});
$(".m-close").click(function(){
$("nav").css({
left:"-100%"
});
});
$(".main>li>a").click(function(){
if($(this).parent().find(".drop").is(":visible")){
$(".drop").slideUp();
}else{
$(".drop").slideUp();
$(this).parent().find(".drop").slideDown();
}
});
});

이 게시물을

번호	분류	제목	글쓴이	날짜	조회

포트폴리오 샘플
- html예제
- 빛그림
- May 21, 2020
- 37
데스크탑, 모바일 구분 접속
- html예제
- 빛그림
- Feb 11, 2019
- 86
터치이벤트, pc환경과 모바일 환경 알아내기 file
- html예제
- 빛그림
- May 04, 2020
- 37
코르도바 를 설정하기 위한 방법 file
- html예제
- 빛그림
- Apr 26, 2020
- 26
sticky position file
- html예제
- 빛그림
- Apr 22, 2020
- 16
webfont file
- html예제
- 빛그림
- Apr 21, 2020
- 16
video file
- html예제
- 빛그림
- Apr 15, 2020
- 19
audio2 file
- html예제
- 빛그림
- Apr 15, 2020
- 19
audio
- html예제
- 빛그림
- Apr 11, 2020
- 10
wheel이벤트3 file
- html예제
- 빛그림
- Apr 11, 2020
- 17
wheel이벤트2 file
- html예제
- 빛그림
- Apr 11, 2020
- 14
wheel이벤트1 file
- html예제
- 빛그림
- Apr 11, 2020
- 28
드레그 앤 드롭 효과 예제 file
- html예제
- 빛그림
- Apr 03, 2020
- 26
드레그 앤 드롭 효과 원리 file
- html예제
- 빛그림
- Apr 03, 2020
- 20
슬라이드 페이지 네이션 file
- html예제
- 빛그림
- Apr 02, 2020
- 16
좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file
- html예제
- 빛그림
- Apr 02, 2020
- 11
모바일 작업 file
- html예제
- 빛그림
- Apr 02, 2020
- 8
자격증 슬라이드 기본
- html예제
- 빛그림
- Mar 30, 2020
- 10
스크롤바 없에는 css
- html예제
- 빛그림
- Mar 30, 2020
- 9
터지이벤트와 mouseup, mousedown이벤트
- html예제
- 빛그림
- Mar 28, 2020
- 11

터치이벤트, pc환경과 모바일 환경 알아내기

포트폴리오 샘플

데스크탑, 모바일 구분 접속

터치이벤트, pc환경과 모바일 환경 알아내기 file

코르도바 를 설정하기 위한 방법 file

sticky position file

webfont file

video file

audio2 file

audio

wheel이벤트3 file

wheel이벤트2 file

wheel이벤트1 file

드레그 앤 드롭 효과 예제 file

드레그 앤 드롭 효과 원리 file

슬라이드 페이지 네이션 file

좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file

모바일 작업 file

자격증 슬라이드 기본

스크롤바 없에는 css

터지이벤트와 mouseup, mousedown이벤트