案例: 图片可以随着手指的拖动 而 变动
1.e.touches[0].clientX 手指横坐标
2. 最后所求 : nowX, nowY 图片的横纵坐标 nowX = 手指横坐标 – 误差
3. 已知条件: 误差 deltaX = 手指横坐标 – nowX (一开始给个初始值)
deltaX 固定 手指初始按下 与 手指移动的过程 是固定的
// 手指距离图片左上角的误差
var deltaX, deltaY;
// 图片的left top 误差量 不能直接得到 需要一个信号量
var nowX = 0;
var nowY = 0;
var img = document.querySelector('img');
img.addEventListener('touchstart', function (e) {
// 位置差:移动的时候 deltaX 固定(已知条件)
deltaX = e.touches[0].clientX - nowX;
deltaY = e.touches[0].clientY - nowY;
}, false)
img.addEventListener("touchmove", function (e) {
// touchmove 2层意思 1.按上了 2.移动了
// 改变信号量 让信号量 带着效果运行
// 最后需要的是 图片左上角的位置 nowX,nowY 会变化 (需要重新给值,确保下一次点的时候位置) 一开始 给个初始位置
nowX = e.touches[0].clientX - deltaX;
nowY = e.touches[0].clientY - deltaY;
img.style.left = nowX + "px";
img.style.top = nowY + "px";
}, false)
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10831.html