话不多少，直接上代码，请自测
HTML:
<code><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://hzimg.huizhuang.com/lib/jquery-2.1.0.min.js"></script>
</head><body>
<div style="height: 500px;background-color:red "></div>
</body>
</code>
脚本：
<code>
//当开始触碰的时候：判断起始的坐标。
$("div").on("touchstart", function(e) {
e.preventDefault(); //阻止默认事件 冒泡 捕获等
startX = e.originalEvent.changedTouches[0].pageX, //开始触碰坐标X轴位置
startY = e.originalEvent.changedTouches[0].pageY; //开始触碰坐标Y轴位置
});
//当开始滑动屏幕的时候：判断滑动结束坐标。
$("div").on("touchmove", function(e) {
e.preventDefault(); //阻止默认事件 冒泡 捕获等
moveEndX = e.originalEvent.changedTouches[0].pageX, //结束触碰坐标X轴位置
moveEndY = e.originalEvent.changedTouches[0].pageY, //结束触碰坐标Y轴位置
X = moveEndX - startX, //结束X坐标减去开始X坐标
Y = moveEndY - startY; //结束Y坐标减去开始Y坐标
//判断：如果左边距离大于0，或者大于上边滑动的距离。就视为往左滑动；同理判断上下左右。
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("top 2 bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
</code>
网友评论