Question

我在this codepen中有一个div，它会像各种各样的画笔。 div被编程为在页面上跟随鼠标。我希望在鼠标所在的任何地方创建隐藏文本后面的白色div，并在鼠标离开该点时将其删除。我正在研究这个问题，但是我还有另一个阻碍我进步的问题。

在过去，我不得不将刷子高出500像素，以便与鼠标保持联系。当我以这种方式保存代码时（我肯定是错的，但我无法理解为什么），附加到正文的白色div显示大约500像素太高。我已经尝试将画笔div设置为绝对且相对定位，但似乎两者都没有区别。

当我从画笔中移除500px差异时会发生类似的事情。画笔显示大约500px太低，白色divs被附加到正确的位置。

任何人都能找到这种现象的合理解释以及如何避免这种现象吗？感谢。

这是正在使用的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);
  });
};

Answer 1

坐标必须一致，在这种情况下，我保留了两个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);
  });
};

附加到正文的Div没有正确的边距

1 个答案: