設置每個鼠標的CSS值.x

這很簡單。我推翻默認鼠標移動事件，我這個替代它：設置每個鼠標的CSS值.x

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作爲補償？

感謝你們所有人努力回答問題！

諾亞

來源

2017-03-09 TheCodeCrafter

您是否調用過'addEventListener'來將'onDocumentMouseMove'綁定到DOM元素？ –

嘗試刪除「px」。 jQuery將自動添加「px」 –

謝謝Chris！這可能是我需要做的，但爲了以防萬一，我還將代碼重新格式化爲Dave的示例。案例關閉，謝謝大家!!!!!!!!!!!!!!!!!! – TheCodeCrafter

你出現，所以你需要這樣的東西被使用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，以便位置正確。

來源

2017-03-09 02:12:11

我認爲你的代碼一般會工作，如果你聲明你的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); 
    }); 
});

來源

2017-03-09 03:18:34 dawchihliou

設置每個鼠標的CSS值.x

回答

相關問題