Слежение за курсором на jquery

Слежение за курсором на jquery

<div class="move-wrap">
  <div id="follower"></div>
</div>

<style>
#follower{
  position : relative;
  background-color : #000;
  width:10px;
  height:10px; /* Размеры движущегося объекта */
  border-radius:50px;
}
.move-wrap {
  width:150px;
  height:150px; /* Размеры области, в которой будет двигаться объект */
  position: relative;
  overflow:hidden;
  border:1px solid #000000;
}
</style>

<script>
$(function(){
    var mouseX = 0, mouseY = 0, limitX = 150-10, limitY = 150-10; // Определяет границы, по которым будет двигаться объект
    $(window).mousemove(function(e){
        var offset = $('.move-wrap').offset();
        mouseX = Math.min(e.pageX - offset.left, limitX);
        mouseY = Math.min(e.pageY - offset.top, limitY); // Ищет координаты курсора
        if (mouseX < 0) mouseX = 0;  // С какого момента (координат) начинать движение за курсором
        if (mouseY < 0) mouseY = 0; // Если курсор находится вне веб-страницы на момент загрузки, то установит объект в координатах x=0, y=0.
    });
 
    var follower = $("#follower");
    var xp = 0, yp = 0; // Начальные координаты объекта на момент загрузки страницы
    var loop = setInterval(function(){
        // Далее определяется скорость, с которой будет двигаться объект.
        // Изменить значение 20, для изменения скорости. Чем больше это значение, тем медленнее движется объект.
        xp += (mouseX - xp) / 20;
        yp += (mouseY - yp) / 20;
        follower.css({left:xp, top:yp}); // Изменение позиционирования объекта с помощью css
         
    }, 10); //В данном случае это значение определяет, насколько плавно и быстро будет происходить движение
});
</script>