JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

 jQueryでマウスポインタの座標をリアルタイムで表示する

jQueryマウスポインタの座標を表示するスクリプトを作ってみよう。

結果サンプル

マウスポインターを動かすとマウスポインターの現在座標をリアルタイムで表示。 

結果
 

 

JavaScript + jQuery

jQueryの「mousemove」関数を使って「window」(ブラウザの表示領域)を基準としたマウスポインターの位置座標を clientX と clientY で取得して、それを <span></span> タグの中にテキストとして表示している。 

$(window).mousemove(function(evt){
 $("#zahyou").text("X:" + evt.clientX + " Y:" + evt.clientY);
});

 

HTML 

「id」を "zahyou" に設定した <span> タグをHTML内の好きな位置に配置するだけで、その位置に座標が表示される。 

<span id="zahyou"></span>

 

END