javascript - 使用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. 多于

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

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

Answer 2

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

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

Answer 3

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