//터치 이벤트 예
//웹 터치
var y=0, last=0, bool=true;
$(document).on("touchstart mousedown", function(e) {
$(".touch-value-start").text("터치가 시작되었어요.");
// e.preventDefault(); 이벤트취소
});
$(document).on("touchmove ", function(e) {
var event = e.originalEvent;
$(".touch-text").text("touch 이벤트 중입니다.");
// 터치한 좌표값 넣기
y=event.changedTouches[0].screenY;
x=event.changedTouches[0].screenX;
$(".y-move").text(y);
$(".x-move").text(x);
console.log(y);
console.log(x);
console.log("마지막 위치 : "+last);
if(y>last ){
console.log("올렸음 : "+y);
$(".footer-menu").stop().fadeOut();
}else{
console.log("내렸음 : "+y);
$(".footer-menu").stop().fadeIn();
console.log("마지막 위치 : "+last);
}
last=y;
// event.preventDefault();
});
$(document).on('touchend mouseup', function(e) {
$(".touch-value-end").text("터치이벤트가 종료되었어요");
});
$(document).on("mousemove",function(event){
$('.x-move').text( event.pageX);
$('.y-move').text( event.pageY);
});
데스크탑에서
mouseup,mousedown,mousemove
예제)
html
<div class="scroll-x-hidden">
<nav class="top-menu">
<ul class="tmenu">
<li><a href="http://naver.com">목록1</a></li>
<li><a href="http://naver.com">목록2</a></li>
<li><a href="http://naver.com">목록3</a></li>
<li><a href="http://naver.com">목록4</a></li>
<li><a href="http://naver.com">목록5</a></li>
<li><a href="http://naver.com">목록6</a></li>
<li><a href="http://naver.com">목록7</a></li>
<li><a href="http://naver.com">목록8</a></li>
</ul>
</nav>
</div>
css
.scroll-x-hidden{
height:20px;
overflow-y:hidden;
float:left;
}
.top-menu{
width:100%;
border:none;
float:left;
overflow:auto;
position:static;
top:-100;
z-index:99999;
left:0;
transition:0.5s;
background:red;
}
.tmenu{
width:150%;
position:relative;
left:0;
top:0;
}
.tmenu>li{
list-style:none;
float:left;
width:12.5%;
border:1px solid #eeeeee;
background:white;
text-align:center;
}
.tmenu>li:first-child{
border-left:none;
}
.tmenu>li:last-child{
border-right:none;
}
js
var draggable = false;
var x = y =0;
var pos_x = pos_y = 0;
$(".tmenu").mousemove(function(e) {
if(x<=-424){
console.log("X : "+x+"끝");
console.log("pos_x : "+pos_x);
console.log("e.pageX : "+e.pageX);
if(draggable ){
x=parseInt($(this).css("left"))+(pos_x-e.pageX);
pos_x=e.pageX;
$(this).css({
left:x
})
console.log("드레그 위치 : "+x);
}
draggable=false;
}else{
console.log("x : "+x+" last : "+last)
if(draggable ){
if(x>=0){
$(this).css({
left:0
})
}
x=parseInt($(this).css("left"))-(pos_x-e.pageX);
pos_x=e.pageX;
$(this).css({
left:x
})
console.log("드레그 위치 : "+x);
}
}
return false;
});
$(".top-menu").mousedown(function(e){
pos_x=e.pageX;
draggable=true;
console.log("top-menu"+pos_x);
console.log(draggable)
return false;
});
$(".top-menu").mouseup(function(e){
draggable=false;
return false;
});