手机端–1.手指拖动touchmove,e.touches[0].clientX[亲测有效]

手机端–1.手指拖动touchmove,e.touches[0].clientX[亲测有效]案例:图片可以随着手指的拖动 而 变动1.e.touches[0].clientX 手指横坐标2. 最后所求 : nowX,nowY 图片的横纵坐标  nowX=  手指横坐标 –  误差3.  已知条件: 误差deltaX= 手指横坐标- nowX (一开始给个初始值) deltaX  固定  手指初始按下  与 手指移动的过…

案例: 图片可以随着手指的拖动  而  变动

1.e.touches[0].clientX  手指横坐标

2.  最后所求  :  nowX, nowY  图片的横纵坐标    nowX =   手指横坐标  –    误差

3.   已知条件:  误差 deltaX = 手指横坐标 –  nowX  (一开始给个初始值) 

deltaX   固定   手指初始按下   与  手指移动的过程  是固定的

delta

​
 // 手指距离图片左上角的误差
        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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注