jquery 获取鼠标移动速度

xlpyo6sf  于 2023-11-17  发布在  jQuery
关注(0)|答案(2)|浏览(101)

我没有从stackoverflow得到一个精确的解决方案/计算,所以我创建了一个问题

var timestamp = null;
var mY = 0;
$(document).mousemove(function(e) {
    var now = Date.now();
    currentmY = e.pageY;


    mY = e.pageY;
    timestamp = now;
});

字符串
我需要得到一个速度值当鼠标移动垂直Angular 。
https://jsfiddle.net/58tjr9o1/

e4yzc0pl

e4yzc0pl1#

速度就是距离除以所用的时间:

speed = distance / time

字符串
距离是currentmY - mY,而时间是now - timestamp。所以最后,你得到:

var timestamp = 0;
var mY = 0;
$(document).mousemove(function(e) {
    var now = Date.now();
    var currentmY = e.screenY;

    var dt = now - timestamp;
    var distance = Math.abs(currentmY - mY);
    var speed = Math.round(distance / dt * 1000);
    console.log(dt, distance, speed);
    document.getElementById("speed").innerHTML = speed;
    
    mY = currentmY;
    timestamp = now;
});


注意* 1000,因为时间戳是以毫秒为单位的,这里的速度是以 * 像素/秒 * 为单位的。
请参阅this updated fiddle

w7t8yxp5

w7t8yxp52#

下面的代码将在id =“update-speed”的范围内不断更新鼠标的垂直移动速度。代码是自我解释和容易理解的,它只是保存当前位置,前一个位置,当前时间和前一个时间,然后使用这个公式计算速度(速度=(pos 2-pos 1)/(time 2-time 1))。

超文本标记语言

<span id="update-speed">Update speed</span>

字符串
JS

var prev_time = new Date();
var prev_pos_y = 0;

$(document).mousemove(function(e) {

var now = new Date();
current_pos_y = e.pageY;

time_interval = now.getTime() - prev_time.getTime();

if(time_interval != 0)
    {
        speed = ( Math.abs(current_pos_y - prev_pos_y) / time_interval );
}
else
    speed = 0;

console.log(speed);

$('#update-speed').text(speed);

prev_time = now;
prev_pos_y = current_pos_y;

});

相关问题