| 标题：手机滑动js |
发帖时间：2017-06-14 10:47:01 |
乌托
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script src="js/jquery-1.11.3.min.js"></script>
<SCRIPT>
$(function(){
$("body").on("touchstart",function(){
movePage(event);
});
$("body").on("touchend",function(){
movePage(event);
});
});
var stX,stY,edX,edY =-1;
var l;
function movePage(event){
if(event.touches.length<=1){
switch (event.type){
case "touchstart":
$("#a").html("结果：开始x坐标"+event.touches[0].clientX);
stX=event.touches[0].clientX;
stY=event.touches[0].clientY;
break;
case "touchend":
$("#a").html($("#a").html()+",结束x坐标："+event.changedTouches[0].clientX);
edX=event.changedTouches[0].clientX;
edY=event.changedTouches[0].clientY;
if(-50>edY-stY||edY-stY>50){
alert("上下滚动不翻页！")
}
else{
if(stX!=-1&&edX!=-1){
l = edX - stX;
if(l<-100){
stX,edX =-1
alert("页面前进！")
}
else if(l>100){
stX,edX =-1
alert("页面后退！")
}
else{
stX,edX =-1
alert("滑动距离不够，什么也不做！")
}
}
else{
stX,edX =-1
alert("操作不对，什么也捕捉！")
}
}
break;
}
}
}
</SCRIPT>
<style>
body{
margin: 0px;
padding: 0px;
}
#a{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="a">结果：</div>
</body>
</html>
