設定マウスあたりのCSS値x

Question

これは簡単です。私は、デフォルトのMouseMoveイベントをオーバーライドし、私はこれでそれを置き換える：

function onDocumentMouseMove(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    mouse.x = (e.clientX/WIDTH) * 2 - 1; 
    mouse.y = -(e.clientY/HEIGHT) * 2 + 1; 

    var x = mouse.x + "px"; 
    $('#gun').css('left', x); 
} 

しかし、これは動作しません、銃はちょうど元々位置としてレンダリングされます。助けてください。私はこのような基本的なことをプログラマにする必要があるからです。私はあまりにも愚かです。多分私は補償としてStackoverflowが必要ですか？

質問にお答えするのにとても熱心な皆さん、ありがとうございます！

• ノア

Answer 1

あなたが好きなものを必要とするようにjQueryを使用しているように見えます。

$(document).ready(function() { 
    var $gun = $('#gun'); 
    var mouseMove = function (e) { 
    $gun.css('left', e.clientX); 
    $gun.css('top', e.clientY); 
    } 
    window.addEventListener('mousemove', mouseMove, false); 
} 

銃要素に正しいCSSを指定して、位置が正しいようにする必要があります。

Answer 2

WIDTH、HEIGHT、mouseが正しいと宣言すると、あなたのコードは一般的にうまくいくと思います。私はあなたのためにdemoを作ったので、結果を見ることができます。

$(document).ready(function() { 
    /* 
    * place jquery objects & constants declarations outside of 
    * event handler so you don't redeclare them every time the 
    * event fires. 
    */ 
    var $gun = $('#gun'); 
    var WIDTH = $gun.css('width').match(/\d*/)[0]; 
    var HEIGHT = $gun.css('height').match(/\d*/)[0]; 

    $('.playground').on('mousemove', function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    var mouse = {}; 

    // your definition of mousemove behavior 
    mouse.x = (e.clientX/WIDTH) * 2 - 1; 
    mouse.y = -(e.clientY/HEIGHT) * 2 + 1; 

    // your DOM manipulations 
    $gun.css('left', mouse.x); 
    }); 
});