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

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

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

如何使用jQuery完成此操作？

Thomas asked 2020-07-07T17:32:32Z

4个解决方案

82 votes

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;才能淡入或显示。

mcbeav answered 2020-07-07T17:32:57Z

9 votes

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

我的网页的主体是1000像素宽，我将其居中在用户浏览器窗口的中间。

body {

position:absolute;

width:1000px;

left: 50%;

margin-left:-500px;

}

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

问题是，仅使用e.pageX值是不正确的。 如果我将浏览器窗口的大小调整为约1000像素宽，那会很好。 然后，弹出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;

});

})

ew 那花了我一段时间来解决！ 我希望这对其他开发人员有用！

Mike Gledhill answered 2020-07-07T17:33:45Z

7 votes

您无需创建$(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');

});

Shaji Kurian answered 2020-07-07T17:34:05Z

-2 votes

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

}

}

//-->

[show on mouseover, hide on mouseout]

Content goes here.

Prosenjit Bhaumik answered 2020-07-07T17:34:20Z