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

Question

我正在尝试开发一个HTML5白板。我想让用户查看公告板知道演示者在屏幕中指向的确切位置。我有能力使用这个jquery函数收集鼠标移动。

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

1. 是否有任何函数或片段，我不能开始?
2. 这将是非常硬件密集的任务，正常人可能有问题吗?
3. 这是实现我想要实现的目标的最好方法吗?

Answer 1

你可以使用.css

移动图像等

:

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

将#image设置为固定或绝对

上面的

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

3. 这可能是最简单和最健壮的解决方案

Answer 2

这实际上已经完成了教程包含在Node.js和websockets。(注意，你可能实际上看不到任何其他游标，因为那篇文章很老了，但你可以通过使用另一台电脑/浏览器看到你自己)。

你说你想用PHP，你可能会移植他的node.js代码到PHP。这是一个可以帮助php实现websockets的库。

Answer 3

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