移动端，判断滑动方向

2018年1月14日 0条评论 216次阅读 0人点赞慕容

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

<meta name="apple-mobile-web-app-capable" content="yes" />

<title>移动端，判断滑动方向</title>

<script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>

</head>

<body>

<script type="text/javascript">

var windowHeight = $(window).height();

$("body").css("height", windowHeight);

var startX, startY, moveEndX, moveEndY, X, Y;

$("body").on("touchstart", function(e) {

e.preventDefault();

startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY;

});

$("body").on("touchmove", function(e) {

e.preventDefault();

moveEndX

 = e.originalEvent.changedTouches[0].pageX, moveEndY =

e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y =

moveEndY - startY;

if (Math.abs(X) > Math.abs(Y) && X > 0) {

alert("left to right");

} else if (Math.abs(X) > Math.abs(Y) && X < 0) {

alert("right to left");

} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {

alert("top to bottom");

} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {

alert("bottom to top");

} else {

alert("just touch");

}

});

</script>

</body>

</html>

更多精彩内容：各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等，尽在天边资源网。

慕容的工作随笔

移动端，判断滑动方向

发表回复