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

Question

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

我怎样才能使用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

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

我的网页正文宽1000像素,我把它放在用户浏览器窗口的中间.

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

现在,在我的JavaScript代码中,当用户右键单击我的页面时,我希望div出现在鼠标位置.

问题是,仅使用e.pageX值并不完全正确.如果我将浏览器窗口调整为大约1000像素宽,它就可以正常工作.然后,pop div 将出现在正确的位置.

但是如果我将浏览器窗口的大小增加到1200像素宽,那么div将出现在用户点击的右侧约100个像素处.

解决方案是将e.pageX与body元素的边界矩形组合在一起.当用户更改其浏览器窗口的大小时,body元素的" left "值会发生变化,我们需要考虑这一点:

// 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;
    });
}) 

唷.我花了一段时间才解决这个问题!我希望这对其他开发者有用!

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');
});