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

Question

我正在尝试开发一个 HTML5 白板。我希望用户查看该图板 了解演示者具体指向屏幕内的哪个位置。我能够 使用 这个 jquery 函数收集鼠标移动。

但即使我成功传递了这个值 对于其他使用 php 的客户端，我该如何模拟它？ 是否可以移动一个小 指针图像，基于从演示者获得的坐标？

1. 是否有任何我无法开始的函数或片段？
2. 这是否是普通人可能会遇到的硬件密集型任务？ 有问题吗？
3. 这是实现我想要实现的目标的最佳方式吗？

Answer 1

那么您可以使用 .css 移动图像，

例如：

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

只需将 #image 设置为固定或绝对

1. above

2. 这不是很硬件密集型。只要您使用 .css 而不是 .animate

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

Answer 2

这实际上已经通过 Node.js 和 websockets 附带的教程完成了。 （请注意，您实际上可能看不到任何其他光标，因为该帖子已经很旧了，但您可能可以通过使用另一台计算机/浏览器看到自己）。

你说你想用PHP，你大概可以把他的node.js代码移植到php。这是一个帮助php 中的 websocket 的库。

Answer 3

在查看者浏览器上使用白板在页面上创建图像。将图像样式设置为position:absolute，并从javascript 根据演示者鼠标的位置设置顶部和左侧属性。使用 setInterval 对服务器进行 javascript 调用并获取演示者鼠标位置。在演示者计算机上，您还需要使用 setInterval 来保存服务器上的鼠标位置。