javascript - 根据鼠标位置移动div

Question

我正在尝试创建并实现一个垂直列表，当您用鼠标悬停它时，一个单独的“光标”div 应该沿着该列表垂直上下移动，与您的指针水平对齐。

我正在使用此代码:

$(document).mousemove( function(e) {
   mouseY = e.pageY;
   mouseX = e.pageX;
   translateY = 'translateY(' + mouseY + 'px)';
   translateX = 'translateX(' + mouseX + 'px)';
});

然后使用 jQuery:

$(".sidebarnav").mouseover(function(){
  $('.sidebarnav .cursor').css({'transform': translateY});
});

所有这些工作，但光标 div 并没有与我的鼠标指针完美对齐。如果你移动得非常缓慢且精确，它会起作用，但如果你移动得更快一点，它就不会。这种缺乏精度是否有任何技术原因，或者我的代码只是错误的？

这是一个jsfiddle http://jsfiddle.net/txks3wtj/

Answer 1

fiddle 肯定会有帮助。但是，如果我正确理解您的代码，我相信您不能只更新 .cursor 在 .sidebarnav 的 mouseover 上的位置 - 相反您需要始终更新其在 mousemove 上的位置。

由于您不希望光标在悬停在侧边栏上时不移动，因此您需要跟踪它是否悬停。像这样的东西:

var isOver = false;

$('.sidebarnav').mouseover(function () {
    isOver = true;
}).mouseout(function () {
    isOver = false;
});

$(document).mousemove( function(e) {
    mouseY = e.pageY;
    mouseX = e.pageX;
    translateY = 'translateY(' + mouseY + 'px)';
    translateX = 'translateX(' + mouseX + 'px)';

    if (isOver) {
        $('.sidebarnav .cursor').css({'transform': translateY});
    }
});

未经测试。

编辑:如果您也缓存查询，将会提高性能；

var sidebar = $('.sidebarnav');
var cursor = sidebar.find('.cursor');

Edit2:我认为使用 mouseenter 和 mouseleave 也可能会得到更好的结果。我认为当您将鼠标悬停在元素的子元素上时，结束/结束也会触发。