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

【问题标题】：Move an image according to the mouse cordinates using jquery使用jquery根据鼠标坐标移动图像
【发布时间】：2011-10-07 16:40:15
【问题描述】：

我正在尝试开发 HTML5 白板。我希望用户查看版块知道演示者在屏幕内的确切位置。我能够使用this jquery function. 收集鼠标移动

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

是否有我无法开始使用的函数或 sn-ps？
这将是普通人可能会执行的硬件密集型任务吗有问题吗？
这是实现我想要实现的目标的最佳方式吗？

【问题讨论】：

标签： javascript jquery html mouse-position whiteboard

【解决方案1】：

你可以使用.css移动图像

如：

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

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

以上
这根本不是硬件密集型的。只要你使用.css而不是.animate
这可能是最简单、最可靠的解决方案

【讨论】：

没问题。我刚刚发布了与您完全相同的代码，并带有指向该小提琴的链接，但您首先到达那里！
如果您需要它缓慢移动而不是瞬间移动，请将 .css 更改为 .animate

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：