- 网站精华
JS 移动端双击缩放，拖动，双指缩放的解决方案
简介 在工作中解决的问题，记录一下。
<pre class="language-javascript"><code>// 监听预览图片加载事件
freshLayoutMaskImg.load(function (){
let startTop = this.offsetTop;
let startLeft = this.offsetLeft;
globaImgWidth = this.width;
globaImgHeight = this.height;
globaImgTop = startTop;
globaImgLeft = startLeft;
let scale = 1.0;
let startX = null;
let startY = null;
let startDst = null;
const _self = this;
let _startTapTime = null; // 触摸开始时间
let _lastTapTime = null; // 触摸结束时间
let oddNumber = 0; // 设置奇偶数
let isSingleHand = false; // 是否是单手
let firstDistance = 0; // 存放手指开始放上的时，两根手指之间的距离
// 缩放事件的处理 计算两根手指之间的距离
var getDistance = function (start, stop) {
return Math.sqrt(Math.pow(Math.abs(start.x - stop.x), 2) + Math.pow(Math.abs(start.y - stop.y), 2));
}
$(this).bind('touchstart', function(event) {
// event.stopPropagation();
_startTapTime = Date.now();
const touches = event.originalEvent.touches;
console.log('touchstart :>> ', touches);
if(touches.length > 1) { //判断是否是两指
const events1 = touches[0];
const events2 = touches[1];
isSingleHand = false;
const one = {
x:events1.pageX, //第一根手指的横坐标
y:events1.pageY, //第一根手指的纵坐标
}; //第一根手指的横坐标
const two = {
x:events2.pageX, //第二根手指的横坐标
y:events2.pageY, //第二根手指的纵坐标
};
firstDistance = CommonJs.getDistance(one,two);
} else {
isSingleHand = true;
startX = touches[0].clientX;
startY = touches[0].clientY;
startTop = _self.offsetTop;
startLeft = _self.offsetLeft;
}
//阻止浏览器默认行为
event.preventDefault();
})
$(this).bind('touchmove', function (event) {
event.preventDefault();
const touches = event.originalEvent.touches;
if (touches.length > 1) {
const events1 = touches[0];
const events2 = touches[1];
const one = {
x:events1.pageX, //第一根手指的横坐标
y:events1.pageY, //第一根手指的纵坐标
}; //第一根手指的横坐标
const two = {
x:events2.pageX, //第二根手指的横坐标
y:events2.pageY, //第二根手指的纵坐标
};
const distance = CommonJs.getDistance(one,two);
const zoom = distance / firstDistance;
isSingleHand = false;
$('#fresh_layout_mask_img').css('transform', 'scale(' + zoom +')');
} else {
var X = touches[0].clientX - startX;
var Y = touches[0].clientY - startY;
_self.style.left = X + startLeft + 'px';
_self.style.top = Y + startTop + 'px';
isSingleHand = true;
}
})
// 手势结束
$(this).bind('touchend', function (event) {
const touches = event.originalEvent.changedTouches;
let curTime = Date.now();
console.log('event', event);
console.log('touchend :>> ', touches);
if (touches.length == 1 isSingleHand) {
//从两指变成一指， 要重置 触点的坐标 和 img的top和left ，不然会乱飙
startX = touches[0].clientX;
startY = touches[0].clientY;
startTop = _self.offsetTop;
startLeft = _self.offsetLeft;
if (curTime - _lastTapTime < 300) {
oddNumber += 1;
if (oddNumber % 2 == 0) {
$('#fresh_layout_mask_img').css('transform', 'scale(1)');
} else {
$('#fresh_layout_mask_img').css('transform', 'scale(2)');
}
}
}
// 点击结束时间
_lastTapTime = Date.now();
})
});
</code></pre>
分享到：
转载：
https://blog.csdn.net/JulyNight/article/details/128934881
喜欢 0
收藏
暂无评论信息