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

jQueryでマウスカーソルの位置を取得する方法 javascript
この記事は約4分で読めます。
スポンサーリンク

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

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

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

【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】

スクリーンの左から0px。

スクリーンの上から0px。

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

【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】

ブラウザの左から0px。

ブラウザの上から0px。

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

ページ内から取得した数値は、ブラウザから得た値(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】

このページの左から0px。

このページの上から0px。

要素の中のカーソル位置を取得(下の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】

この要素(offset)の左から0px。

この要素(offset)の上から0px。

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

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

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

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

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

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

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

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました