неточность захвата перемещения мыши jquery

Question

У меня странная проблема. Я фиксирую движения мыши с помощью:

var mmoves = [];
jQuery(document).mousemove(function(event) {
   mmoves.push({x:event.pageX, y:event.pageY})
}

Затем я присоединяю div к странице, например:

$("body").append('<div id="mouseemul" style="padding:0; margin:0; color: red; background-color: blue; width: 1px; height: 1px;">*</div>');

и затем попытайтесь воспроизвести ходы

На большинстве страниц работает нормально, но на некоторых страницах начинается воспроизведение (начальная позиция "*") на несколько пикселей вправо (х). У в порядке, но х составляет около 120 пикселей вправо. На других страницах это точно. На неточных страницах, когда мышь закрывает правую полосу прокрутки, она выходит за правую границу страницы и создает горизонтальную полосу прокрутки.

Я думаю, что это связано с некоторым стилем CSS для воспроизводимой страницы.

У кого-нибудь есть идея, что может быть причиной этого? Как я могу получить фактическое смещение (если есть смещение для таких страниц)?

Большое спасибо,

Hernan

- Edited-- Очевидно, что смещение по оси x связано с позиционированием основного документа. Первый элемент дает $ .position () 0,134, и если я ПОДЧЕРКНУЮ эту сумму из записанных данных, воспроизведение будет точным. Проблема в том, что это смещение происходит не на каждой странице, и я не знаю, как выяснить, когда смещение происходит, а когда нет (чтобы исправить его путем вычитания).

Answer 1

Запись

Если вы хотите захватить и воспроизвести движение мыши, вы можете попробовать «запись» с document.Для этого использовались бы аккорды x и y из окна.

Для этого вы можете использовать элемент DOM документа:

var m = [];

// Using the document instead of body might solve your issue
$( document ).mousemove(function( e ){

  m.push({ x : e.pageX, y : e.pageY });

});

Воспроизведение

HTML / CSS

Ваш HTML / CSS должен быть элементом div на странице с position: fixed, который должен соответствовать вашим образцам аккордов javascript, так как fixed абсолютно расположен в окне:

<style>
    .replay {
        /* Use position fixed to match window chords */
        position: fixed;
        top: 0;
        left: 0;

        /* These are just for show */
        border-radius: 20px;
        background: red;
        width: 10px;
        height: 10px;
    }
</style>

<div class="replay"></div>

Javascript

Для воспроизведения захваченных аккордов вы можете использовать что-то вроде этого:

var $replay = $('.replay'), // Get mouse simulator
    i = 0, l = m.length,
    pos, t;

// Recursive animation function
function anim(){

  // Cache current position
  pos = m[i];

  // Move to next position
  $replay.css({ top: pos.y, left: pos.x });

  i++;

  // Exit recursive loop
  if ( i === l )
     clearTimeout( t );
  // Or keep going
  else
    t = setTimeout(anim, 100); // Timeout speed controls animation speed

}

// Start animation loop
anim();

Демо

Попробуйте это на этой демо .