<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双指缩放事件</title>
</head>
<body>
<div class="full-bgimg">
</div>
<script>
var pageX, pageY, initX, initY, isTouch = false;
var start = [];
$(".full-bgimg").on("touchstart",function(e){
// alert("touchstart")
//手指按下时的手指所在的X，Y坐标
pageX = e.originalEvent.touches[0].pageX;
pageY = e.originalEvent.touches[0].pageY;
//初始位置的X，Y 坐标
initX = e.target.offsetLeft;
initY = e.target.offsetTop;
//记录初始 一组数据 作为缩放使用
if (e.originalEvent.touches.length >= 2) { //判断是否有两个点在屏幕上
start = e.originalEvent.touches; //得到第一组两个点
};
//表示手指已按下
// isTouch = true;
});
$(".full-bgimg").on("touchmove",function(e){
e.preventDefault();
// 一根 手指 执行 目标元素移动 操作
if (e.originalEvent.touches.length == 1 && isTouch) {};
// 2 根 手指执行 目标元素放大操作
if (e.originalEvent.touches.length >= 2 && isTouch) {
// alert("2")
//得到第二组两个点
var now = e.originalEvent.touches;
Math.abs(e.originalEvent.touches[0].pageX-e.originalEvent.touches[1].pageX)
//当前距离变小， getDistance 是勾股定理的一个方法
if(getDistance(now[0], now[1]) < getDistance(start[0], start[1])){
};
};
})
$(".full-bgimg").on("touchend",function(e){
//将 isTouch 修改为false 表示 手指已经离开屏幕
// if (isTouch) {isTouch = false;}
});
//缩放 勾股定理方法-求两点之间的距离
function getDistance(p1, p2) {
var x = p2.pageX - p1.pageX,
y = p2.pageY - p1.pageY;
return Math.sqrt((x * x) + (y * y));
};
</script>
</body>
</html>【瑞模网】移动端双指缩放事件(原生)，e.originalEvent.touches
猜你喜欢
转载自blog.csdn.net/rrmod/article/details/128923757
今日推荐
周排行