Cursometer - 呈现用户的鼠标速度

Question

今天，我了解到 cursometer，这是一个 JQuery 插件，旨在监控用户的光标速度。我已经研究了这个指南作为参考

http://www.loganfranken.com/blog/49/capturing-cursor-speed/

HTML

<p id="speed"></p>

<image src="http://hdwallpapersd.com/wp-content/uploads/2014/06/cool-background-for-designer-wallpaper.jpg" height="200" width="200" />

JQuery

$(document).ready(function() {
  $('image').cursometer();

  var currSpeed = $('image').cursometer('getCurrentSpeed')

  $('#speed').html('Speed' + currSpeed);
});

当我mousemove图像时，我希望在段落中显示光标速度。

我为此创建了一个fiddle

http://jsfiddle.net/4pj0vu9t/

Answer 1

稍微更改代码...

HTML:（注意class）

<p id="speed">Speed</p>
<image class='image' src="http://hdwallpapersd.com/wp-content/uploads/2014/06/cool-background-for-designer-wallpaper.jpg" height="200" width="200" />

JS:

$(document).ready(function () {
    $('.image').cursometer({
        onUpdateSpeed: function (speed) {
            $('#speed').html('Speed: ' + speed);
        },
        updateSpeedRate: 20
    });
});

基本上，我使用 onUpdateSpeed 来捕捉每 20 毫秒的速度变化。使用内置的配置选项。如果没有 class 选择器，它就无法工作，因此将其更改为 class='image'.

您的代码仅运行一次；这个重复正确。此外，您需要包含 jQuery。

工作 jsFiddle： http://jsfiddle.net/rfornal/4pj0vu9t/3/

Cursometer - 呈现用户的鼠标速度

Cursometer - Rendering a user's mouse speed

javascript

jquery

mousemove