根據使用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. 這可能是這其實已經完成with tutorial included使用的是Node.js和WebSockets的最簡單，最可靠的解決方案

Answer 2

。 （請注意，您可能實際上沒有看到任何其他遊標，因爲該帖子非常陳舊，但您可以使用其他計算機/瀏覽器查看自己）。

你說你想使用PHP，你可以將他的node.js代碼移植到php。這裏有一個圖書館來幫助websockets in php.

Answer 3

在瀏覽器瀏覽器上使用白板在頁面上創建一個圖像。將圖像樣式設置爲絕對位置，並從javascript根據演示者鼠標的位置設置頂部和左側屬性。使用setInterval對服務器進行JavaScript調用並獲取演示者鼠標位置。在演示者計算機上，您還需要使用setInterval以在服務器上保存鼠標位置。