文章/答案/技术大牛

发布

js鼠标跟随

基础概念

JavaScript鼠标跟随是指通过JavaScript代码实现页面上的某个元素（如图片、文字框等）随着鼠标的移动而实时移动的效果。这种效果通常用于提升用户体验，使页面元素更加生动和互动。

类型

简单跟随：元素直接跟随鼠标指针移动。
平滑跟随：元素平滑地跟随鼠标移动，而不是瞬间跳转到鼠标位置。
边界检测：确保元素不会移出可视区域。

应用场景

游戏界面：如射击游戏中准星跟随鼠标移动。
导航菜单：当用户将鼠标悬停在某个区域时，显示相关信息或导航选项。
广告宣传：吸引用户注意力的动态广告。

示例代码

以下是一个简单的JavaScript鼠标跟随效果的实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标跟随示例</title>
<style>
  #followElement {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
  }
</style>
</head>
<body>

<div id="followElement"></div>

<script>
  var element = document.getElementById('followElement');

  document.onmousemove = function(event) {
    element.style.left = event.clientX + 'px';
    element.style.top = event.clientY + 'px';
  };
</script>

</body>
</html>

可能遇到的问题及解决方法

问题1：元素移动卡顿

原因：可能是由于页面上其他JavaScript代码执行导致的性能问题。
解决方法：优化JavaScript代码，减少不必要的DOM操作；使用requestAnimationFrame来优化动画效果。

问题2：元素移出可视区域

原因：没有对元素的移动范围进行限制。
解决方法：添加边界检测逻辑，确保元素不会移出浏览器窗口。

document.onmousemove = function(event) {
  var x = event.clientX;
  var y = event.clientY;

  // 边界检测
  if (x < 0) x = 0;
  if (y < 0) y = 0;
  if (x > window.innerWidth - element.offsetWidth) x = window.innerWidth - element.offsetWidth;
  if (y > window.innerHeight - element.offsetHeight) y = window.innerHeight - element.offsetHeight;

  element.style.left = x + 'px';
  element.style.top = y + 'px';
};

通过以上方法，可以有效实现一个基本的鼠标跟随效果，并解决一些常见问题。

页面内容是否对你有帮助？

有帮助

没帮助

p5鼠标跟随

javascript、canvas、processing

我试图在p5.js (画布)中实现特定的鼠标跟随效果，我希望对象像这里一样跟随鼠标：，但应用了" in -back“样式的缓动。换句话说，我想让对象吸引鼠标，但要传递吸引它的坐标，比如说10%，然后返回到它实际正在寻找的坐标。如果你看我添加的示例草图，这应该应用于触发矩形内的所有鼠标跟随，而不仅仅是最初的触发移动。它是用p5.js编写的，但我确信数学原理适用于所有地方，所以所请求的帮助不一定仅限于p5/canva

浏览 4提问于2018-05-06得票数 0

2回答

图像跟随鼠标，使用mousemove事件(使用Jquery/Javascript)

javascript、jquery、mousemove

我希望当鼠标移动时，图像跟随鼠标移动，但当鼠标单击任意位置时，图像停止跟随；当鼠标再次单击时，图像开始跟随。<!name="description" content="Mousemove"> <script src="https://code.jquery.com/jquery-3.5.0.min.js/images&#x

浏览 9提问于2020-05-17得票数 2

3回答

jQuery -如何破坏一个附加在元素上的事件？

javascript、jquery、events、mouseevent、mouseup

我有一些代码行，它将在mousedown-ed之后将一个元素移动到鼠标位置。元素在mouseup之后仍然跟随鼠标！jQuery(document).ready(function ($) { $(".cr

浏览 3提问于2015-07-04得票数 3

回答已采纳

1回答

three.js OrbitControls跟随鼠标指针

javascript、three.js

我制作了一些用three.js实现的三维图形项目的网站。但是我想知道OrbitControls有一些特性可以让相机跟随鼠标指针吗？参考站点在这里：https://50-jahre-hitparade.ch/我想实现100%与上述网站的相机移动相同。谢谢。

浏览 2提问于2018-09-13得票数 0

回答已采纳

3回答

Jquery -带缓动的背景位置动画

jquery、mousemove、easing

但是我不知道如何停止动画的排队，让动画“跟随”鼠标左右移动。HTML：<div id="animateme"></div>$("#animateme").bind('mousemove', function将鼠标悬停在顶部图像上，您可以看到跟随鼠标的背景动画。但我想在此添加一些缓和，以便它跟随

浏览 3提问于2012-12-27得票数 4

回答已采纳

1回答

在div后面的jquery函数中使用mousedown、mousemove、mouseup

javascript、jquery

我想做一个jquery函数，“鼠标按下时跟随div”-这样当鼠标按下时，当鼠标移动时，我页面上的div会跟随光标。<script> $(document).on('click',

浏览 1提问于2014-02-14得票数 0

2回答

Fabric.js -无需按住鼠标键即可移动对象

javascript、fabricjs

在Fabric.js中，可以通过单击鼠标左键、按住鼠标键并移动鼠标来在画布中移动对象。在这种情况下，选定的对象跟随鼠标光标，并触发object:moving。释放鼠标左键可退出此模式。例如，单击一次使对象跟随光标移动(并使object:moving正确触发)，然后再次单击以将对象释放到其最终位置？我希望避免在监听“鼠标移动”事件时从头开始编写这篇文章，因为这已经实现了，但只有进入/存在此模式的触发器必须更改。

浏览 4提问于2016-01-25得票数 2

1回答

使用单击和悬停事件在jquery中创建虚拟鼠标间隔

javascript、jquery、html

现在我想要创建虚拟鼠标垫。我被创建了两个div，一个用于鼠标垫，另一个是容器中的容器，另一个div用作游标(类名为跟随者)。在鼠标垫div中，当鼠标移动时，跟随div相对于鼠标位置移动。现在，我想使用虚拟游标生成单击事件，意思是使用跟随器单击按钮。Button1 Button2 MousePadvar mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;

浏览 5提问于2013-11-23得票数 0

回答已采纳

1回答

Vue.js画布元素跟随鼠标

javascript、vue.js、canvas

我在Vue中制作了颜色选择器，基于HTML画布，我想在颜色选择器上添加显示活动颜色的透明圆圈，这将跟随鼠标在画布上。我尝试将此代码更改为我的用法：，得到的结果如下：如您所见，我的圆圈跟随鼠标位置，但会留下痕迹。鼠标位置动态更新为状态，我的函数中的X、Y数据从状态接收。

浏览 5提问于2019-11-21得票数 0

2回答

jquery - mousemove:如何防止div停止跟随鼠标

jquery、html、mousemove

我使用jQuery在黄色框上添加鼠标移动效果。当鼠标位于黄色框上时，鼠标经过会使红色框跟随鼠标移动。当鼠标到达黄色框中的红色框时，鼠标不再停留在黄色框上，红色框停止跟随鼠标移动。当鼠标再次进入黄色框时，它会再次随鼠标移动--当然。只要鼠标在黄色框上，红色框就必须跟随鼠标移动，并且不会因为它在红色框上移动而停止。有没有办法防止这种情况发生？>

浏览 3提问于2012-08-22得票数 2

回答已采纳

1回答

Three.js -对象跟随鼠标位置

javascript、three.js

我正在Three.js中创建一个球体，它必须在鼠标移动时跟踪它，如中所显示的那样。处理鼠标移动的函数如下： event.preventDefault

浏览 3提问于2016-03-16得票数 11

回答已采纳

1回答

当鼠标单击和T F更新时，图像消失

javascript、jquery

我要移动的图像消失，并且鼠标单击的状态没有更新。}); }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1&#x

浏览 3提问于2019-03-02得票数 0

1回答

CSS变换破坏鼠标位置事件

javascript、jquery、css、transform、scale

缩放的div有鼠标覆盖事件，这些事件会导致文本跟随鼠标。缩放破坏了应该跟随鼠标的元素的位置。缩放： transform-origin: top left;} 元素在

浏览 0提问于2014-08-12得票数 1

回答已采纳

1回答

虚拟屏幕的xrandr布局

linux、xrandr

浏览 0提问于2018-01-16得票数 2

1回答

我怎样才能让我的GLTF对象通过手机上的触摸来跟踪某人呢？

html、three.js

使用three.js上的资源和其他问题，我创建了一个GLTF模型，当鼠标在画布上移动时，它会跟随鼠标移动(请参阅下面的代码)。然而，当在我的安卓手机上查看页面时，模型不会像在OrbitControls中使用时那样旋转以跟随触摸。eventlisteners；touchstart，touchend和touchmove，因为我认为这可能是我需要的让它响应触摸事件的方法，但不幸的是，我不太擅长JavaScript，也不是three.js一个有效的例子(尽管我不知道他们是否在使用three.<e

浏览 41提问于2019-06-02得票数 1

回答已采纳

1回答

JavaScript中的鼠标事件？

javascript、canvas、mouseevent

如何使用JavaScript让图像跟随鼠标移动？我目前正在使用新的HTML5画布元素。(我希望鼠标跟随的图像在画布上，我只希望它跟随鼠标的位置。)

浏览 3提问于2011-05-22得票数 0

2回答

跟踪鼠标指针

javascript

我想要一段文字跟随鼠标指针，但只有当鼠标悬停在图像上时。直到现在，它的部分工作:当鼠标访问图像区域，文本块跳到鼠标指针，并保持连接到它。但不幸的是，当鼠标再次离开图像区域时，文本仍然附着在鼠标上，并在鼠标指向的地方跟随鼠标指针。相反，它应该回到它的起始位置。height: auto;.my-text { top: 120px; left: 120p

浏览 2提问于2022-05-07得票数 0

回答已采纳

2回答

Aquamacs/emacs:焦点跟随-鼠标未按预期工作

emacs、focus、aquamacs

我想只需移动鼠标就可以在帧/缓冲区之间切换。就我通过搜索这个问题所发现的，您可以将以下代码放在Preferences.el中以使其工作：另请参阅此处：和此处：我也找到了(设置鼠标-自动选择

浏览 0提问于2011-09-24得票数 2

回答已采纳

2回答

在鼠标位置将影片剪辑居中

flash、actionscript-3、animation、actionscript、air

我正在使用Action script3.0来设置一个实例(MovieClip类)的动画，让它跟随鼠标正电子，这个实例的左上角跟随着鼠标。现在在左上角有一个十字，我猜鼠标会跟随这个十字，但我不能改变实例/原始对象中十字的位置。有人知道如何使该实例的中心跟随鼠标光标移动吗？感谢所有人在这个话题上的帮助。

浏览 1提问于2011-10-22得票数 0

回答已采纳

4回答