Div附加到身體沒有正確的利潤率

-1

我有一個div在this codepen將行爲像一個刷子。 div被編程爲在頁面上跟隨鼠標。我想創建隱藏文本後面的白色div，無論鼠標位於何處，並在鼠標離開該位置時將其移除。我正在研究這個問題，但是我有另一個阻礙我進步的問題。Div附加到身體沒有正確的利潤率

在過去，我不得不將刷子的高度定在500像素以上，以便與鼠標保持聯繫。當我以這種方式保留代碼時（我確信它是錯誤的，但我不明白爲什麼），附加到身體上的白色div顯示500像素太高。我曾嘗試將brush div設置爲絕對和相對定位，但似乎都沒有什麼區別。

當我從畫筆中刪除500px的差異時，會出現類似的情況。筆刷出現約500px太低，白色div被追加到正確的位置。

任何人都可以找到這種現象的邏輯解釋，以及如何避免它？謝謝。

這裏是正在使用的JavaScript（部分JQuery的）：

window.onload = function() { 
    var brush = $('#brush'); 
    window.addEventListener('mousemove', function(event) { 
    var x = event.clientX - 50; 
    var y = event.clientY - 50; 
    $('#brush').css({"margin-left": x, "margin-top": y}); 

    var div = $('<div>').css({ 
     "position": "absolute", 
     "left": brush.css("margin-left"), 
     "top": brush.css("margin-top"), 
     "width": "100px", 
     "height": "100px", 
     "background-color": "white", 
     "z-index": "5" 
    }).addClass('clearable'); 
    $(document.body).append(div); 
    }); 
};

來源

2016-03-27 NuffsaidM8

您是否想正確使用#brush鼠標，而不是使用鼠標？ –

是的，那正是我所要做的。 – NuffsaidM8

這個問題似乎與滾動。確保在獲得x和y偏移量時使用正確的值。 –

座標必須是一致的，在這種情況下，我不停的頂部和左側值兩者的div。

window.onload = function() { 
var brush = $('#brush'); 
window.addEventListener('mousemove', function(event) { 
    var x = event.clientX - 50; 
    var y = event.clientY - 50; 
    $('#brush').css({"left": x, "top": y}); 

    var div = $('<div>').css({ 
     "position": "absolute", 
     "left": brush.css("left"), 
     "top": brush.css("top"), 
     "width": "100px", 
     "height": "100px", 
     "background-color": "white", 
     "z-index": "5" 
    }).addClass('clearable'); 
    $(document.body).append(div); 
    }); 
};

來源

2016-03-27 16:08:55

Div附加到身體沒有正確的利潤率

回答

相關問題