【jQueryの技】jQueryでマウスポインタの座標をリアルタイムで表示する
今回は jQuery を使ってマウスポインタの座標を表示する仕組みを作ります。
~ サンプル ~
マウスポインターを動かすとマウスポインターの現在座標をピクセル単位でリアルタイムに表示します。
結果
jQuery コード
jQuery の「mousemove」関数で、ブラウザの表示領域の左上を基準(X座標=0px、Y座標=0px)にマウスポインターの位置座標を clientX と clientY で取得し、それを <span></span> タグの中にテキストとして表示しています。
$(window).mousemove(function(evt){
$("#zahyou").text("X:" + evt.clientX + " Y:" + evt.clientY);
});
HTMLソース
"zahyou" という ID を設定した span タグ(<span id="zahyou"></span>)をHTML内の好きな位置に配置すれば、その位置にピクセル単位の座標が表示されます。
<span id="zahyou"></span>
END