使用jQuery根据鼠标坐标移动图像

Question

我正在尝试开发一个HTML5白板。我希望查看白板的用户知道演示者在屏幕上指向的确切位置。我可以使用这个JQuery函数收集鼠标移动信息。（链接）但是，即使我成功通过PHP将这些值传递给其他客户端，我应该如何模拟它呢？是否有可能根据从演示者获得的坐标移动小指针图像？

1. 是否有可供参考的函数或片段？
2. 这会是非常耗费硬件资源的任务，普通人可能会遇到问题吗？
3. 这是实现我所需要的功能的最佳方法吗？

- esafwan

Answer 1

你可以使用 .css 来移动图片，例如：

$(window).mousemove(function(event) {
  $("#image").css({"left" : event.pageX, "top" : event.pageY});
});

只需将 #image 设置为 fixed 或 absolute

1. 以上

2. 这不需要太多硬件资源，只要使用 .css 而不是 .animate

3. 这可能是最简单和最强大的解决方案

- switz

---

没问题。我刚刚发布了与你完全相同的代码，附带那个fiddle的链接，但你先到了！ - James Allardice

如果你需要它缓慢移动而不是瞬间移动，将 ".css" 更改为 ".animate"。 - Nick Gallimore

Answer 2

这实际上已经使用Node.js和Websockets完成了包括教程在内。（请注意，您实际上可能看不到任何其他光标，因为该帖子相当古老，但您可以使用另一台计算机/浏览器来查看自己）。

您说您想使用PHP，您可以将他的node.js代码移植到php。这里有一个帮助使用php进行Websockets的库。

- helloandre

Answer 3

使用JavaScript在观看者浏览器上创建带有白板的图像。将图像样式设置为position:absolute，并根据演示者鼠标的位置从JavaScript中设置top和left属性。使用setInterval来进行JavaScript调用服务器并获取演示者鼠标位置。在演示者的计算机上，您也需要使用setInterval将鼠标位置保存在服务器上。

- nivs1978