如何使用JS在鼠标移动时将div的中心定位到鼠标光标的中心？
[英]How to position the center of a div to the center of the mouse cursor on mouse movement with JS?
问题描述
我正在尝试将div元素的中心定位到鼠标光标的中心，这将跟随其移动。
我已经想出了下面的代码，但是这个代码的问题是，以下div不在光标的中心，而是与光标有一些偏移。
工作流程
我的代码的基本思想是，当鼠标进入.post-entry div元素时，应显示当前项中的.pointer并跟随鼠标的光标。 当鼠标离开div它应该被隐藏。
码
HTML发布项目：
<article class="col-md-4 col-sm-6 post-entry">
<a href="#" title="">
<figure class="post-thumb">
<img src="http://placehold.it/300x300" alt="">
<div class="pointer" style="background: red;"></div>
</figure><!-- End figure.post-thumb -->
</a>
</article><!-- End article.col-md-4 post-entry -->
JS：
$('.entry .post-entry').each(function() {
$(this).on("mouseenter", mouseEnter);
$(this).on("mousemove", mouseMove);
$(this).on("mouseleave", mouseLeave);
});
function mouseEnter(event) {
console.log('enter');
var target = $(this);
var dot = target.find('.pointer');
var mX = (event.clientX);
var mY = (event.clientY);
set(
dot, {
x: mX,
y: mY,
force3D: !0
}
);
};
function mouseMove(event) {
console.log('move');
var target = $(this);
var dot = target.find('.pointer');
// var offset = target.offset();
// var width = target.width();
// var height = target.height();
// var top = offset.top;
// var left = offset.left;
var mX = (event.clientX);
var mY = (event.clientY);
$(dot).css('-webkit-transform', 'translate3d(' + mX + 'px, ' + mY + 'px, 0)');
};
function mouseLeave(event) {
console.log('leave');
var target = $(this);
var dot = target.find('.pointer');
$(dot).css('-webkit-transform', 'translate3d(0, 0, 0) scale(0, 0)');
};
function onClick(event) {
event.preventDefault();
console.log('click');
};
function set(el, obj) {
var dot = $(el).css('-webkit-transform', 'translate3d(' + obj.x + 'px, ' + obj.y + 'px, 0px)');
return dot;
};
问题/演示
如前所述，跨度位于鼠标光标之后，只有跨度没有位于光标的中心。 它将偏移鼠标。 在这里观看现场演示
我已经为mX和mY变量尝试过类似的方法，但是没有成功：
var mX = (event.clientX - $(this).offset().left) / $(this).width() * $(this).width() - .125 * $(this).width();
var mY = (event.clientY - $(this).offsetTop) / $(this).height() * $(this).height() - .125 * $(this).width();
@hiEven的答案也行不通，会让我遇到同样的问题：
transform: calc(mX - 50%, mY - 50%)
我知道我应该将.pointer除以一半，但是对我来说，如何在代码中实现它是一个很大的问号。
更新
我创建了两个新的Codepen项目：
不带图片使用： http : //codepen.io/anon/pen/GqGOLv 。 当您将鼠标悬停在第一项上时，您会看到棕色指针正确地位于您的鼠标光标之后-我在寻找什么。 但是，将鼠标悬停在第二个上时，只有当您位于项目的最左侧时，您才会看到红色指针。
当我使用图像时： http : //codepen.io/anon/pen/QExOkx 。 此示例的问题是，当您在第一列的顶部时，将看到棕色指针。 将鼠标悬停在第二个项目的左上角时，您会看到一小部分红色指针，与没有图像的示例相同。
两个指针都应正确跟随鼠标光标。 我正在寻找一种可以使用图像的解决方案。
在这两个示例旁边，当我添加到第一个示例时，在第一个项目margin-left增加了一个margin-left ，仅当将其设置为左边空白为零时，棕色指针才会位于鼠标光标的中心。
因此，我不知道缺少什么，为什么它仅适用于第一个示例（无图像）并且仅适用于第一个项目？
3 个解决方案
解决方案1
1 2016-07-27 02:08:57
解决方案2
0 2016-07-27 18:10:59
根据我的最新更新，我不符合将元素.pointer到鼠标所需的正确公式。
为了在mouseMove中使用以下计算：
var mX = (event.clientX);
var mY = (event.clientY);
应更改为：
var height = dot.height();
var width = dot.width();
var offset = target.offset();
var w = target.width();
var h = target.height();
var top = offset.top;
var left = offset.left;
var mX = (event.clientX - left) - width / 2 - 15; // 15 = padding
var mY = (event.clientY - top) - height / 2;
因此，此公式考虑的是以下DOM元素.pointer将跟随用户的鼠标移动。 我不知道为什么会这样，但是从当前clientX坐标到上一个项目的偏移量将减少，因此第二个项目的位置被重置为零，因此指针将从每个项目的左侧开始。
这是上面代码的工作演示： http : //codepen.io/anon/pen/AXdxZO?editors=0110
解决方案3
0 2017-11-17 00:42:24
试试下面的代码
<html>
<head>
<style>
#mouse_div{
position: absolute;
background-color: black;
}
</style>
<script>
var div_width = 100;
var div_height = 100;
var div_x, div_y;
function mouse_position(event){
var mouse_x = event.clientX;
var mouse_y = event.clientY;
document.getElementById("mouse_div").style.width = div_width + "px";
document.getElementById("mouse_div").style.height = div_height + "px";
div_x = mouse_x - (div_width / 2);
div_y = mouse_y - (div_height / 2);
document.getElementById("mouse_div").style.left = div_x + "px";
document.getElementById("mouse_div").style.top = div_y + "px";
}
</script>
</head>
<body onmousemove="mouse_position(event)" onload="mouse_position(event)">
<div id="mouse_div"></div>
</body>
</html>
该程序获取鼠标的位置， div的宽度和高度。 然后，它取x并从中减去div的宽度除以2（这将div的x位置居中在鼠标上）。 然后，程序对鼠标y执行相同的操作。 一旦所有的变量的定义，我使用JavaScript访问的div CSS放置div它必须这样做。
注意：您必须确保div的位置设置为绝对位置，否则程序将无法运行。
尺寸增加后将自定义 cursor 捕捉回鼠标中心？
[英]Snap a custom cursor back to the center of the mouse after a size increase?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.