计算移动端网页滑动距离


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, user-scalable=no" name="viewport">
	<title>懒人原生touch事件,计算滑动距离</title>
	<style>
	*{margin:0;padding:0;}
	#demo{width:100%;height:500px;float:left;}
	</style>
</head>
<body>
<div id="demo">
	请用移动设备访问,滑动屏幕后即可弹出滑动距离
</div>
<script>
	var b = document.getElementsByTagName("body")[0];
	b.addEventListener("touchmove", function(e){
		e.preventDefault();
	});
	(function(){
		var startX,startY,endX,endY,moveLength;
		var el = document.querySelector("#demo");
		//获取点击开始的坐标
		el.addEventListener("touchstart", function (e){
			startX = e.touches[0].pageX;
			startY = e.touches[0].pageY;
		});
		//获取点击结束后的坐标
		el.addEventListener("touchend", function(e){
			endX = e.changedTouches[0].pageX;
			endY = e.changedTouches[0].pageY;
			var x = Math.abs(endX - startX);
			var y = Math.abs(endY - startY);
			//长方形的斜边长 = 两个直线的平方的和的平方根
			moveLength = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
			alert("本次的移动距离为:"+moveLength);
		})
	})();
</script>
</body>
</html>

转载于:https://my.oschina.net/daladida/blog/739751

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值