根據鼠標位置移動div

我正在嘗試創建並生成垂直列表，並且將鼠標懸停在鼠標上時，單獨的「光標」div應沿着此列表垂直上下移動與你的指針對齊。根據鼠標位置移動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}); 
});

所有這方面的工作，但光標股利不完全與我的鼠標指針對準。它的確如果你真的慢而且精確地移動，但是如果你移動得更快一點，它就不會。是否有任何技術原因導致精度不足，或者我的代碼錯誤？

這裏是一個的jsfiddle http://jsfiddle.net/txks3wtj/

來源

2014-09-11 alemur

你能否創建一個顯示確切問題的http://jsfiddle.net。如果沒有看到您的HTML，很難想象。 – 2014-09-11 08:34:20

同意@RoryMcCrossan也可以調用'translateY'，例如用一個'mouseY'的值爲100解析爲'translateY（100px）;'這可能是錯誤的，因爲'100px'是一個字符串，需要被包裝在引號中。 – 2014-09-11 08:36:08

您可能還有更多的運氣，使用'top，left，right ...'等CSS屬性進行絕對定位的div。等等。 – 2014-09-11 08:37:16

小提琴肯定會有所幫助。但是，如果我正確理解您的代碼，我相信您不能只更新.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太，我認爲。我想一旦你把元素的一個孩子懸停，就會觸發over/out觸發器。

來源

2014-09-11 08:39:56 powerbuoy

根據鼠標位置移動div

回答

相關問題