jQuery число приращение/уменьшение по пикселю, используя мышь и mousemove

Question

У меня есть этот jQuery. код получает координаты, где мышь входит, смещение для начала 0:

var inc_X_by = 0, inc_Y_by = 0, total_X = 0, total_Y = 0; 

$("#mouse_over").mouseenter(function() { 
    var $this = $(this), 
     offset = $this.offset(), 
     in_X = (event.clientX - offset.left), 
     in_Y = (event.clientY - offset.top); 

затем получает координаты, как мышь движется внутрь:

$('#mouse_over').mousemove(function(e){ 
    var mouse_X = (event.clientX - offset.left), 
     mouse_Y = (event.clientY - offset.top); 

и дает общее приращение + или - разница:

inc_X_by = mouse_X - in_X; 
    inc_Y_by = mouse_Y - in_Y;  
    }); 

Затем, когда мышь покидает DIV он добавляет/отрицательное приращение к общей каждый раз:

}).mouseleave(function() { 
    total_X = total_X + inc_X_by; 
    total_Y = total_Y + inc_Y_by; 
}); 

Здесь работает jsfiddle

На данный момент сумма всех приращений только обновления, когда мышь покидает DIV. Однако я хочу, чтобы он постоянно обновлял , когда мышь перемещается внутри. Если я отбрасываю вычисления итогов в функцию mousemove, он добавляет число inc каждый раз, когда он изменяется, то есть: если inc увеличивается на два пикселя, от 100 до 102, вместо добавления 2 добавляет 100, 101, 102 = 303 Большая разница.

Кто-нибудь знает решение?

Как noob, любой другой совет по коду также очень ценится.

Answer 1

Я зафиксировал это путем добавления нового Var:

var X_prev = 0, Y_prev = 0; 

и затем, если/другое заявление, которое определяет, если мышь движется L/R, H/V

if (X_prev < mouse_X) { 
    inc_X_by = 1; 
    } else if (X_prev == mouse_X) { 
    inc_X_by = 0; 
    } else { 
    inc_X_by = -1; 
    }; 

затем установить предыдущая позиция мыши к текущему.

X_prev = mouse_X; 

так что, если, например, предыдущее положение мыши меньше, чем ток, то мышь движется вправо, установите приращение на +1. Затем, перемещая итоговые значения в mousemove, он добавляет +1 каждый раз, когда он срабатывает. Тогда нет необходимости в mouseenter или mouseleave.

Полный код выглядит следующим образом, jsfiddle here:

var inc_X_by = 0, inc_Y_by = 0, total_X = 0, total_Y = 0, X_prev = 0, Y_prev = 0; 

$('#mouse_over').mousemove(function(e){ 
    var $this = $(this), 
     offset = $this.offset(), 
     mouse_X = (event.clientX - offset.left), 
     mouse_Y = (event.clientY - offset.top); 

     if (X_prev < mouse_X) { 
      inc_X_by = 1; 
     } else if (X_prev == mouse_X) { 
      inc_X_by = 0; 
     } else { 
      inc_X_by = -1; 
     }; 

     if (Y_prev < mouse_Y) { 
      inc_Y_by = 1; 
     } else if (Y_prev == mouse_Y) { 
      inc_Y_by = 0; 
     } else { 
      inc_Y_by = -1; 
     } 

     X_prev = mouse_X; 
     Y_prev = mouse_Y; 

     total_X = total_X + inc_X_by; 
     total_Y = total_Y + inc_Y_by; 
    }); 
}) 

Одним из основных отличий является то, что если скачет мыши над очень быстро, то MouseMove срабатывает только пару раз, поэтому вы будете увеличивать только немногие, когда на самом деле вы, возможно, путешествовали гораздо больше.

Answer 2

Просто добавьте свой код mousemove в функцию mouseenter, его работа в вашем jsfiddle с этими изменениями.

Просто измените код JQuery со следующим: -

var inc_X_by = 0, inc_Y_by = 0, total_X = 0, total_Y = 0; 

$("#mouse_over").mouseenter(function() { 
    var $this = $(this), 
     offset = $this.offset(), 
     in_X = (event.clientX - offset.left), 
     in_Y = (event.clientY - offset.top); 

    $('#coords_in').html("mouseenter coords = " + in_X + ", " + in_Y); 

    $('#mouse_over').mousemove(function(e){ 
    var mouse_X = (event.clientX - offset.left), 
     mouse_Y = (event.clientY - offset.top); 

    $('#coords').html("mousemove coords = " + mouse_X + ', ' + mouse_Y); 

    inc_X_by = mouse_X - in_X; 
    inc_Y_by = mouse_Y - in_Y; 
    $('#inc_by').html("current increment = " + inc_X_by + ", " + inc_Y_by); 

     total_X = total_X + inc_X_by; 
    total_Y = total_Y + inc_Y_by; 
    $('#total').html("total of all increments = " + total_X + ", " + total_Y); 

    }); 

}).mouseleave(function() { 
    total_X = total_X + inc_X_by; 
    total_Y = total_Y + inc_Y_by; 
    $('#total').html("total of all increments = " + total_X + ", " + total_Y); 
}); 

Это может помочь вам.