设置每个鼠标的CSS值.x

Question

这很简单。我推翻默认鼠标移动事件，我这个替代它：

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

然而，这是不行的，枪只是渲染为最初定位。请帮忙，因为我需要知道这样的基本东西是一个程序员。我太傻了。也许我需要*作为补偿？

感谢你们所有人努力回答问题！

• 诺亚

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