JavaScript移动端缩放位移 touch 事件

爬过不少坑 , 总结下基于原生 JavaScript touch 事件实现移动端缩放位移

下面有在 Vue 项目中的实现方法仅供参考

闲话少叙看代码:

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>gesture</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>#app {position: absolute;bottom: 0px;left: 0px;border: 2px solid red;width: 700px;height: 500px;overflow: hidden;}.box {touch-action: none;position: absolute;background: green;border: 1px solid black;width: 300px;height: 200px;}</style>
</head><body><div id="app"><!--下面 class="box" 的元素 可以替换为 pdf 文件 或者 图片...><!-- <embed src="pdf地址" type="application/pdf" internalinstanceid="4" class="box"> --><div class="box"></div><!-- <img src="1.png" alt="" class="box"> --></div><script>var pageX, pageY, initX, initY, isTouch = false;var start = [];document.addEventListener("touchstart", function (e) {//手指按下时的手指所在的X，Y坐标  pageX = e.targetTouches[0].pageX;pageY = e.targetTouches[0].pageY;//初始位置的X，Y 坐标  initX = e.target.offsetLeft;initY = e.target.offsetTop;//记录初始 一组数据 作为缩放使用if (e.touches.length >= 2) { //判断是否有两个点在屏幕上start = e.touches; //得到第一组两个点};//表示手指已按下  isTouch = true;}, false);//监听 touchmove 事件 手指 移动时 做的事情document.addEventListener("touchmove", function (e) {e.preventDefault();// 一根 手指 执行 目标元素移动 操作if (e.touches.length == 1 && isTouch) {//移动目标的 X Y 坐标var touchMoveX = e.targetTouches[0].pageX,touchMoveY = e.targetTouches[0].pageY;//设置当前点击元素的 top left 定位值e.target.style.left = parseInt(touchMoveX) - parseInt(pageX) + parseInt(initX) + "px";e.target.style.top = parseInt(touchMoveY) - parseInt(pageY) + parseInt(initY) + "px";};// 2 根 手指执行 目标元素放大操作if (e.touches.length >= 2 && isTouch && e.scale < 2.5) {//得到第二组两个点var now = e.touches;//得到缩放比例， getDistance 是勾股定理的一个方法var scale = (getDistance(now[0], now[1]) / getDistance(start[0], start[1]));// 对缩放 比例 取整e.scale = scale.toFixed(2);// 执行目标元素的缩放操作e.target.style.transform = "scale(" + scale + ")";};}, false);//监听 手指离开屏幕时 document.addEventListener("touchend", function (e) {//将 isTouch 修改为false  表示 手指已经离开屏幕if (isTouch) {isTouch = false;}}, 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>

到 ipad, 安卓, 苹果上试试效果吧

注释已经写的很全面了如果想要添加其他的操作可以在相应的监听事件里做....

如何集成到 vue 中可以查看 Vue 中实现移动端缩放位移

以上内容仅供参考

如有错误请指正Email:

---------> bianliuzhu@gmail.com<----------

JavaScript移动端缩放位移 touch 事件相关推荐

H5案例分享：移动端滑屏 touch事件
移动端滑屏 touch事件移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
移动端web开发---Touch事件详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题移动设备主要特点是不配备鼠标,键盘 ...
h5滚动时侧滑出现_H5案例分享：移动端滑屏 touch事件
touchstart: //触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. touchmove: //在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefault()可阻止 ...
搞定移动端一(移动端 touch 事件，TouchEvent 对象)
移动端事件 1.目标掌握移动端 touch 事件使用掌握 touch 事件和 mouse 事件的区别掌握 touchEvent 实现移动端幻灯片 2.移动端touch事件 touchstart ...
移动端开发-touch事件及其相关属性
1. 为什么移动端使用touch事件习惯在电脑上写js代码的同学可能想问一个问题:为什么移动端要使用touch事件,mouse事件和click事件在手机上不能触发么?其实这个问题很容易解决.首先,这 ...
移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
移动端touch事件实现页面弹动--小插件
动手之前的打盹说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...
原生js实现移动端touch事件，解决穿透问题
四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取 ...
android touch事件无反应,移动端touch事件
当用户手指放在移动设备在屏幕上滑动会触发的touch事件 webkit: touchstart--当手指触碰屏幕时候发生.不管当前有多少只手指 touchmove--当手指在屏幕上滑动时连续触发.通常 ...

JavaScript移动端缩放位移 touch 事件

JavaScript移动端缩放位移 touch 事件相关推荐

最新文章

热门文章

JavaScript移动端 缩放 位移 touch 事件

JavaScript移动端 缩放 位移 touch 事件相关推荐

最新文章

热门文章

JavaScript移动端缩放位移 touch 事件

JavaScript移动端缩放位移 touch 事件相关推荐