JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

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

f:id:vw-dsg:20200601063533p:plain

今回は 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