本日はJQueryでマウスを動かすだけで座標を画面に表示させるデモを実施してみたいと思います。
簡単なのでサクッといきます。
それでは行ってみましょう！
Menu
座標取得（画面やブラウザ）mousemoveイベント
まずはマウスをブラウザ内で動かしてみてください(^O^)
下記の青枠内に座標がリアルタイムに表示されます。
画面とブラウザの座標取得
➀mousemoveイベントでスクリーン（画面）左上からの座標
➁mousemoveイベントでブラウザの左上からの座標
JQueryサンプル
下記のようなHTMLを2つ作成します。
1 2 | <p class="screen"></p> <p class="client"></p> |
➀screenXとscreenYで座標取得（画面）
マウスを動かすとスクリーン（画面）の左上を基準にmousumoveイベントが発動され、イベントオブジェクトのscreenプロパティでX座標（横）とY座標（縦）がリアルタイムに取得してHTMLのscreenクラスに表示されます。
1 2 3 | $(window).mousemove(function(e) { $(".screen").text("screen : X" + e.screenX + " : Y" + e.screenY); }); |
➁clientXとclientYで座標取得（ブラウザ）
マウスを動かすとブラウザの左上を基準にmousumoveイベントが発動され、イベントオブジェクトのclientプロパティでX座標とY座標を取得してHTMLのclientクラスに表示されます。
1 2 3 | $(window).mousemove(function(e) { $(".client").text("client : X" + e.clientX + " : Y" + e.clientY); }); |
まとめ
暇だったのリアルタイム座標を作成してみましたが、ん～何に使用するか迷うところです。
せっかく作成したんだから何かに使用しないと意味がないんですよね～
ま～また何か考えて何か役立つものを作成します。
以上です。
