Курсометр - визуализация скорости мыши пользователя

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 изображение, я хотел бы скорость курсора которые будут показаны в параграфе.

Я создал скрипку для этого

http://jsfiddle.net/4pj0vu9t/

Answer 1

Изменить код чуть-чуть ...

HTML: (обратите внимание на класс)

<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='image'.

Ваш код запускался только один раз; это повторяется правильно. Кроме того, вам нужно включить jQuery.

Рабочая jsFiddle:http://jsfiddle.net/rfornal/4pj0vu9t/3/