如何使用jQuery定位相对于鼠标指针的div？

Question

假设我在我的页面中有一个链接，我希望当我将鼠标放在链接上时，div会根据鼠标x，y显示在那里。

我该如何使用jQuery来完成这项工作？

Answer 1

var mouseX; 
var mouseY; 
$(document).mousemove(function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
}); 
$(".classForHoverEffect").mouseover(function(){ 
    $('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow'); 
}); 

上面的函数将使DIV出现在页面上可能存在的任何链接上。当链接悬停时，它会慢慢消失。您也可以使用.hover（）。从那里DIV会留下来，所以如果你想在DIV消失，当鼠标移开，然后，

$(".classForHoverEffect").mouseout(function(){ 
    $('#DivToShow').fadeOut('slow'); 
}); 

如果DIV已经定位，你可以简单地使用

$('.classForHoverEffect').hover(function(){ 
    $('#DivToShow').fadeIn('slow'); 
}); 

而且请记住，您的DIV格式需要设置为display:none;才能淡入或显示。

Answer 2

<script type="text/javascript" language="JavaScript"> 

    var cX = 0; 
    var cY = 0; 
    var rX = 0; 
    var rY = 0; 

    function UpdateCursorPosition(e) { 
    cX = e.pageX; 
    cY = e.pageY; 
    } 

    function UpdateCursorPositionDocAll(e) { 
    cX = event.clientX; 
    cY = event.clientY; 
    } 
    if (document.all) { 
    document.onmousemove = UpdateCursorPositionDocAll; 
    } else { 
    document.onmousemove = UpdateCursorPosition; 
    } 

    function AssignPosition(d) { 
    if (self.pageYOffset) { 
     rX = self.pageXOffset; 
     rY = self.pageYOffset; 
    } else if (document.documentElement && document.documentElement.scrollTop) { 
     rX = document.documentElement.scrollLeft; 
     rY = document.documentElement.scrollTop; 
    } else if (document.body) { 
     rX = document.body.scrollLeft; 
     rY = document.body.scrollTop; 
    } 
    if (document.all) { 
     cX += rX; 
     cY += rY; 
    } 
    d.style.left = (cX + 10) + "px"; 
    d.style.top = (cY + 10) + "px"; 
    } 

    function HideContent(d) { 
    if (d.length < 1) { 
     return; 
    } 
    document.getElementById(d).style.display = "none"; 
    } 

    function ShowContent(d) { 
    if (d.length < 1) { 
     return; 
    } 
    var dd = document.getElementById(d); 
    AssignPosition(dd); 
    dd.style.display = "block"; 
    } 

    function ReverseContentDisplay(d) { 
    if (d.length < 1) { 
     return; 
    } 
    var dd = document.getElementById(d); 
    AssignPosition(dd); 
    if (dd.style.display == "none") { 
     dd.style.display = "block"; 
    } else { 
     dd.style.display = "none"; 
    } 
    } 
    //--> 
</script> 


<a onmouseover="ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')"> 
[show on mouseover, hide on mouseout] 
</a> 
<div id="uniquename3" style="display:none; 
position:absolute; 
border-style: solid; 
background-color: white; 
padding: 5px;"> 
    Content goes here. 
</div> 

Answer 3

您不需要创建$(document).mousemove(function(e) {})来处理鼠标x，y。获取$.hover函数中的事件，并从那里获得鼠标的x和y位置。看到下面的代码：

$('foo').hover(function(e){ 
    var pos = [e.pageX-150,e.pageY]; 
    $('foo1').dialog("option", "position", pos); 
    $('foo1').dialog('open'); 
},function(){ 
    $('foo1').dialog('close'); 
}); 

Answer 4

有很多使用JQuery检索鼠标坐标的例子，但没有解决我的问题。

我网页的正文是1000个像素宽，我居中在用户的浏览器窗口的中间。

body { 
    position:absolute; 
    width:1000px; 
    left: 50%; 
    margin-left:-500px; 
} 

现在，在我的JavaScript代码中，当用户右键单击我的页面时，我想要一个div出现在鼠标位置。

问题是，只是使用e.pageX值不是很对。如果我将浏览器窗口的大小调整为大约1000像素，它会很好地工作。然后，弹出格将出现在正确的位置。

但是，如果将我的浏览器窗口的大小增加到1200像素宽，那么div将出现大约100像素到用户点击的位置的右​​边。

解决方案是将e.pageX与body元素的边界矩形相结合。当用户改变他们的浏览器窗口的大小，“左”的主体元素的变化值，我们需要考虑到这一点：

// Temporary variables to hold the mouse x and y position 
var tempX = 0; 
var tempY = 0; 

jQuery(document).ready(function() { 
    $(document).mousemove(function (e) { 
     var bodyOffsets = document.body.getBoundingClientRect(); 
     tempX = e.pageX - bodyOffsets.left; 
     tempY = e.pageY; 
    }); 
}) 

唷。我花了一段时间来修复！我希望这对其他开发者有用！