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像素的 100个像素处。

解决方案是将 e.pageX 与body元素的边界矩形结合起来。当用户更改其浏览器窗口的大小时，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; }); })

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

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

<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>

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

4 个答案: