移动端双指缩放事件(原生)，e.originalEvent.touches

<!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相关推荐

android js 双指事件,JS实现移动端双指缩放和旋转方法
JS实现移动端双指缩放和旋转方法发表于 2020-2-25|标签javascript js实现移动端双指缩放和旋转,具体代码如下所示: ```javascript var initHeading = ...
移动端双指缩放、旋转
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
点击图片放大,实现移动端双指缩放,单指拖拽功能
记录一下最近项目中用到的点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失一.实现效果: 页面原图展示: 点击图片后: 二.代码实现: ...
android js 双指事件,JS实现移动端双指缩放和旋转方法_旧址_前端开发者
var initHeading = 0; var rotation = 0; var lastTime; function setGesture(el){ var obj={}; var istouc ...
js移动端双指缩放和旋转
在iOS上有一组双指事件gesturestart.gesturechange.gestureend gesturestart触发条件是当屏幕上有两根或以上手指并且第二根手指放在当前元素上当两根手指移 ...
移动端js实现双指缩放，单指拖动图片
1.可通过修改图片的宽高来缩放图片 2.可通过修改transform进行缩放图片,使用transform默认的作用中心是元素的中心点,需要通过transform-origin:0 0调整作用中心点 3 ...
html5 双指缩放图片,js实现移动端图片预览：手势缩放，手势拖动，双击放大......
查看示例效果: 一.功能介绍图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
android js 双指事件,双指缩放的实现方式对比
一.双指缩放的实现方式方式一: 根据手势计算scale重新render生成视图实现逻辑 (1) 通过Web端手势库 AlloyFinger 获取元素onPinch事件的双指缩放比例scale. ( ...
移动端页面禁止双指缩放
移动端页面禁止双指缩放 Html页面添加以下meta标签 <meta name="viewport" content="width=device-width, in ...

移动端双指缩放事件(原生)，e.originalEvent.touches

移动端双指缩放事件(原生)，e.originalEvent.touches相关推荐

最新文章

热门文章