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函数中，它会在每次更改时添加一个公司编号，即：如果公司上升两个像素，从100到102，而不是添加2，则添加100,101,102 = 303一个很大的不同。

任何人都知道解决方案吗？

作为一个菜鸟，对该代码的任何其他建议也非常感激。

Answer 1

只需将您的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);
});

它可能对你有帮助。

Answer 2

我通过添加一个新的var：

来解决这个问题

var X_prev = 0, Y_prev = 0;

然后是一个if / else语句，用于确定鼠标是否正在移动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;
  };

然后将prev鼠标位置设置为当前。

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;
    });
})

一个主要的区别是，如果鼠标快速跳过，那么鼠标移动只会激发几次，因此你只会增加几个，而实际上你可能已经走了很多。

jQuery数字按像素移动递增/递减，使用mouseenter和mousemove

2 个答案: