JS 移动端双击缩放,拖动,双指缩放的解决方案
分类专栏: Javascript&
简介 在工作中解决的问题,记录一下。
<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
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
-
jQuery 3.0正式发布
jQuery 基金会刚刚发布了该 Java 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持。jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2.0 版本之上进行完善,并和遥远的 1.0 版代码说再见——因为要兼容 IE 的缘故,其已经臃肿不堪。jQuery 2.0 已经与 1.0 版本完全不兼容,而 3.0 也将继续这一路线。
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1247天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据