首页 新闻 会员 周边 捐助

新手请教前端的一些问题

0
悬赏园豆:100 [已解决问题] 解决于 2020-05-08 16:39

var cirDiv = document.querySelector('#cir');

    var speedx = 0, speedy = 0;

    var lastx = 0, lasty = 0;

    cirDiv.onmousedown = function (e) {

        var evt = e || window.event;
        var x = evt.clientX -cirDiv.offsetLeft;
        var y = evt.clientY - cirDiv.offsetTop;
        document.onmousemove = function (e1) {
            var evt = e1 || window.event;
            cirDiv.style.left = evt.clientX - x + 'px';
            cirDiv.style.top = evt.clientY - y +'px';
            speedx = evt.clientX - x - lastx;
            speedy = evt.clientY - y - lasty;
            lastx = evt.clientX - x;
            lasty = evt.clientY - y;
        }
    }

谁能帮忙解释下这个speedx speedy的值是怎么来的的 不应该为0么 萌新 求教了

问题补充:

我的意思是lastx = evt.clientX - x;
speedx = evt.clientX - x - lastx;
计算过后结果应该是0 啊

花满楼11的主页 花满楼11 | 初学一级 | 园豆:102
提问于:2020-05-08 14:03
< >
分享
最佳答案
0

            var evt = e1 || window.event;
            cirDiv.style.left = evt.clientX - x + 'px';
            cirDiv.style.top = evt.clientY - y +'px';
            speedx = evt.clientX - x - lastx;
            speedy = evt.clientY - y - lasty;
            lastx = evt.clientX - x;
            lasty = evt.clientY - y;

这里为什么speedx不为0?
因为evt,即mouseMove事件,并非一成不变的,当你移动鼠标时,每次触发的evt对应是当前鼠标的位置,其clientX和clientY也是随着鼠标移动而变化的。
而lastx记录的是上一次鼠标位置计算的结果,并不是当前evt.clientX的值了。

譬如:
T0时刻,鼠标位置为(100,200),当前位置X/Y分别为100,200,而 lastx=0,lasty=0;
T1时刻,鼠标移动到(500,800), 当前位置X/Y分别为500,800,而lastx=100,lasty=200;
T2时刻,鼠标移动到(300,,600),当前位置X/Y分别为300,600,而 lastx=500,lasty=800
....

收获园豆:100
。淑女范erり | 小虾三级 |园豆:961 | 2020-05-08 15:56

是不是可以理解成这样:这个speed的值是程序执行的时候,因为先后顺序有时间差异造成的。就是说上一条代码执行到下一条代码执行有时间差,而在这个时间差内mouseMove的变化导致了数值的差就是speed的值。 我这样理解对么?请教!!!

花满楼11 | 园豆:102 (初学一级) | 2020-05-08 16:11

@花满楼11: 对,简单的来说就是你理解的这样子:
把当前鼠标位置,和上一次鼠标位置做差值,就是speed。

不过实际上这个onMouseMove这样用很危险的,因为鼠标一直移动,一直触发这个事件,很耗费cpu的。。

。淑女范erり | 园豆:961 (小虾三级) | 2020-05-08 16:29

@。淑女范erり: 谢谢了 懂了

花满楼11 | 园豆:102 (初学一级) | 2020-05-08 16:38
其他回答(1)
1
 speedx = evt.clientX - x - lastx;
 speedy = evt.clientY - y - lasty;

这来的

会长 | 园豆:12463 (专家六级) | 2020-05-08 14:36

我的意思是lastx = evt.clientX - x;
speedx = evt.clientX - x - lastx;
计算过后结果应该是0 啊

支持(0) 反对(0) 花满楼11 | 园豆:102 (初学一级) | 2020-05-08 14:56

@花满楼11:
speedx = evt.clientX - x - lastx=evt.clientX - (evt.clientX -cirDiv.offsetLeft) - lastx
speedx = evt.clientX - x - lastx=evt.clientX - evt.clientX + cirDiv.offsetLeft - lastx
speedx = evt.clientX - x - lastx= cirDiv.offsetLeft - lastx

支持(0) 反对(0) 会长 | 园豆:12463 (专家六级) | 2020-05-08 16:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册