移动端图片手势控制双指缩放单指移动

var pageX,pageY,position_top,position_left;function setGesture(el) {var obj = {}; //定义一个对象var istouch = false;var start = [];el.addEventListener("touchstart", function(e) {if (e.touches.length >= 2) { //判断是否有两个点在屏幕上istouch = true;start = e.touches; //得到第一组两个点obj.gesturestart && obj.gesturestart.call(el); //执行gesturestart方法}else if(e.touches.length == 1){istouch = true;var touch = e.touches[0]; //获取第一个触点pageX = Number(touch.pageX); //页面触点X坐标pageY = Number(touch.pageY); //页面触点Y坐标// 获取对象的top left值var _obj = $('body .tpsf')position_left = parseFloat(_obj.css('left').split('p')[0]);position_top = parseFloat(_obj.css('top').split('p')[0]);}}, false);document.addEventListener("touchmove", function(e) {e.preventDefault();if (e.touches.length >= 2 && istouch) {var now = e.touches; //得到第二组两个点var scale = getDistance(now[0], now[1]) / getDistance(start[0], start[1]); //得到缩放比例，getDistance是勾股定理的一个方法e.scale = scale.toFixed(2);obj.gesturemove && obj.gesturemove.call(el, e); //执行gesturemove方法}else if(e.touches.length == 1){var touch = e.touches[0]; //获取第一个触点var pageX2 = Number(touch.pageX); //页面触点X坐标var pageY2 = Number(touch.pageY); //页面触点Y坐标//控制图片移动$('body .tpsf').css({'top': position_top + pageY2 - pageY + 'px',"left": position_left + pageX2 - pageX + 'px'})}}, false);document.addEventListener("touchend", function(e) {if (istouch) {istouch = false;obj.gestureend && obj.gestureend.call(el); //执行gestureend方法};}, false);return obj;};function getDistance(p1, p2) {var x = p2.pageX - p1.pageX,y = p2.pageY - p1.pageY;return Math.sqrt((x * x) + (y * y));};function getAngle(p1, p2) {var x = p1.pageX - p2.pageX,y = p1.pageY - p2.pageY;return Math.atan2(y, x) * 180 / Math.PI;};var box = document.querySelector(".tpsf");var boxGesture = setGesture(box); //得到一个对象boxGesture.gesturestart = function() { //双指开始// box.style.backgroundColor = "yellow";};boxGesture.gesturemove = function(e) { //双指移动box.innerHTML = e.scale + "<br />" + e.rotation;box.style.transform = "scale(" + e.scale + ")"; //改变目标元素的大小和角度};boxGesture.gestureend = function() { //双指结束box.innerHTML = "";};

移动端图片手势控制双指缩放单指移动相关推荐

双指缩放canvas图片_移动端图片手势控制双指缩放单指移动
var pageX,pageY,position_top,position_left; function setGesture(el) { var obj = {}; //定义一个对象 var ist ...
点击图片放大,实现移动端双指缩放,单指拖拽功能
记录一下最近项目中用到的点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失一.实现效果: 页面原图展示: 点击图片后: 二.代码实现: ...
移动开发之手势与双指缩放
上周遇见一个关于双指缩放的问题,同时这个双指缩放也比较常见,于是决定对移动开发手势做一个学习和总结,并给出一个双指缩放的实例,希望对读者提供一些帮助. 先给一个例子,点此查看双指缩放实例前言当年乔 ...
android 手势识别（缩放单指滑动多指滑动）
Android P 手势识别 1.前提介绍: 2.单指相关 2.双指缩放 3.多指滑动. 4.总体识别代码 1.前提介绍: 关于Android 手势识别就是当前view 根据用户的不同touch行为, ...
html微信内置浏览器点击图片放大，双指缩放，附源码（自测可用）
本人用的是vue框架引用微信的JS <script type="text/javascript" src="http://res.wx.qq.com/open/j ...
html5 双指缩放图片,js实现移动端图片预览：手势缩放，手势拖动，双击放大......
查看示例效果: 一.功能介绍图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
h5 img js 点击图片放大_H5实现移动端图片预览：手势缩放，手势拖动，双击放大......
查看示例效果: 一.功能介绍图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
仿抖音视频双指缩放和单指滑动效果
最近刷抖音看视频时,对一个视频某个位置比较感兴趣,采用双指放大查看细节,然后还可以随意滑动到任何位置,比较感兴趣,决定自己来实现此效果: 分析效果:ViewPager左右滑动,视频列表上下滑动+下拉刷 ...
Web前端_配合swiper滑动插件实现同比例双指缩放图片
参考过的一篇文章:https://blog.csdn.net/gl0ry/article/details/56055414 html实例代码: 缩放的图片需要放在class 为list 的div里面 ...

移动端图片手势控制双指缩放单指移动

移动端图片手势控制双指缩放单指移动相关推荐

最新文章

热门文章

移动端 图片手势控制 双指缩放 单指移动

移动端 图片手势控制 双指缩放 单指移动相关推荐

最新文章

热门文章

移动端图片手势控制双指缩放单指移动

移动端图片手势控制双指缩放单指移动相关推荐