jQueryでマウスカーソルの位置を取得する方法

マウスカーソルの取得でよく使う値は、トップからの位置ぐらいなものですが
知っておくと便利な、色々な場所からのカーソル値の取得方法のご紹介です。

さらに最後に、カーソルの値を使った面白いウェブサイトのご紹介もあります。
カーソルの値だけ取れてもつまらないもんね。
こんなことができる見本として、今後製作するウェブサイトのアイディアの一つにしていただけると嬉しいです。

スクリーン全体からのカーソル位置を取得

【HTML】

  <div class="screen">
    <p>スクリーンの左から<span  class="screen-x"></span>px。</p>
    <p>スクリーンの上から<span  class="screen-y"></span>px。</p>
  </div>

【jQuery】

$(function() {
	$(window).on('mousemove', function(e) {
		$('.screen-x').text(e.screenX);
		$('.screen-y').text(e.screenY);
	});
});

【Demo】

ブラウザ内のカーソル位置を取得

【HTML】

  <div class="client">
    <p>ブラウザの左から<span  class="client-x"></span>px。</p>
    <p>ブラウザの上から<span  class="client-y"></span>px。</p>
  </div>

【jQuery】

$(function() {
	$(window).on('mousemove', function(e) {
		$('.client-x').text(e.clientX);
		$('.client-y').text(e.clientY);
	});
});

【Demo】

現在のページ内のカーソル位置を取得

ページ内から取得した数値は、ブラウザから得た値（client-xとclient-y）と似ている。
縦に長いページだとY座標が目立って大きくなるので、少しわかりやすい。少しだけ。

【HTML】

  <div class="page">
    <p>このページの左から<span  class="page-x"></span>px。</p>
    <p>このページの上から<span  class="page-y"></span>px。</p>
  </div>

【jQuery】

$(function() {
	$(window).on('mousemove', function(e) {
		$('.page-x').text(e.pageX);
		$('.page-y').text(e.pageY);
	});
});

【Demo】

要素の中のカーソル位置を取得（下のdemoのoffsetクラス内）

【HTML】

  <div class="offset">
    <p>この要素（offset）の左から<span  class="offset-x"></span>px。</p>
    <p>この要素（offset）の上から<span  class="offset-y"></span>px。</p>
  </div>

【jQuery】

$(function() {
	$('.offset').on('mousemove', function(e) {
		$('.offset-x').text(e.offsetX);
		$('.offset-y').text(e.offsetY);
	});
});

【Demo】

カーソル位置を活用したウェブサイト事例

サンタをつかんでフリフリするとポロポロプレゼントが落ちてくる

カーソル位置で要素がユワンユワンする

カーソルの位置で文字の色が変化する

CSSの中がカーソルで塗られる

カーソル移動でフォントが縮またり広がったり、太くなったり細くなったり

カーソルの値で様々な効果が付けれて楽しいです。
上のページを見ていて、近いうちに、カーソルの値を使ったページを自分も作ってみたくなりました。
ではまた明日！