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

Question

我正在尝试开发HTML5白板。我希望用户查看电路板 了解演示者在屏幕中指向的确切位置。我能够 使用this jquery function.

收集鼠标移动

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

1. 是否有任何我无法启动的功能或片段？
2. 这是否是普通人可能的硬件密集型任务 有问题吗？
3. 这是实现我想要实现的目标的最佳途径吗？

Answer 1

您可以使用.css

移动图像

如：

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

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

1. 上述

2. 这根本不是硬件密集型的。只要您使用.css而非.animate

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

Answer 2

实际上已经使用Node.js和websockets完成了with tutorial included。 （注意，您可能实际上看不到任何其他游标，因为该帖子已经很老了，但您可以通过使用其他计算机/浏览器来看到自己）。

你说你想使用PHP，你可以将他的node.js代码移植到php。这是一个帮助websockets in php.

的图书馆

Answer 3

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