jqueryを使用してマウスの座標に従って画像を移動します

Question

HTML5ホワイトボードを開発しようとしています。私は、ボード を見ているユーザーが、プレゼンターが画面内のどこを指しているのかを知りたがっています。私は私はそれをどのようにエミュレートすることができ、this jquery function.

しかし、たとえ私は、これはPHPを使用して他のクライアントへ 値渡すために成功した場合を使用して、マウスの動きを収集 にできますか？ ポインターイメージをプレゼンターから得られた座標に基づいて移動することはできますか？

1. 私が始めることのできない機能やスニペットはありますか？
2. これは、通常の人々が に問題がある可能性がある非常にハードウェア集約的なタスクですか？
3. これは私が達成しようとしていることを達成するための最良の方法ですか？

Answer 1

さてあなたは、次のような.css

使用して画像を移動することができます。ちょうど

上記固定または絶対

1. に#imageを設定

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

   をこれはあまりハードウェアに集中しません。限り、あなたは.cssなく.animate

2. を使用するので、これはおそらく、これは実際のNode.jsとWebSocketを持つwith tutorial included行われている最も簡単で堅牢なソリューション

Answer 2

です。 （実際には、そのポストはかなり古いので、他のカーソルは実際には見えないかもしれませんが、あなたは別のコンピュータ/ブラウザを使って自分自身を見ることができます）。

あなたはPHPを使いたいと思っています。おそらくnode.jsコードをPHPに移植することができます。ここには図書館があります。websockets in php.

Answer 3

ビューアブラウザでホワイトボードで画像を作成します。画像のスタイルをposition：absoluteに設定し、javascriptから、プレゼンターのマウスの位置に応じてtopプロパティとleftプロパティを設定します。 setIntervalを使用してサーバーへのjavascript呼び出しを行い、プレゼンターのマウス位置を取得します。発表者のコンピュータでは、setIntervalを使用してマウスの位置をサーバーに保存する必要があります。