JavaScript | マウスカーソルに要素を追従移動させる方法

javascript DOM操作,JavaScript,JavaScript イベント

マウスカーソルに要素を追従移動させるイベントの実装方法

JavaScriptを利用して図形や画像・文字列などの要素をマウスカーソルの位置に追従して移動させるイベント処理の実装方法の紹介です。

要素をマウスカーソルの位置に追従して移動させるイベント処理サンプル

See the Pen JavaScript マウス by yochans (@yochans) on CodePen.

<div id="container">
	<div id="item"></div>
</div>
#container {
	width: 100%;
	height: 200px;
	position: relative;
	background: #000;
	overflow: hidden;
}

#item{
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #0091EA;
}

移動する要素(#item)が親要素(#container)からはみ出さないように親要素には「overflow: hidden」を指定しています。

サンプルでは、簡単な円を作成していますが、画像やアイコン、文字列なんかでも代用可能です。

window.onload=function(){
	const container = document.getElementById('container');
	const item = document.getElementById('item');
	
	container.addEventListener("mousemove", (e) => {
		item.style.left = e.clientX - 25 + "px";
		item.style.top = e.clientY - 25 + "px";
	});
}

addEventListenerにて作成したイベント関数からマウス座標を取得して、追従移動させたい要素のpositionを指定しています。

JavaScriptでCSSのpxを指定する場合は基本的に数値と”px”が必要なので注意します。

要素の再配置に計算している「-25px」は要素の半径から指定しています。
取得するマウスカーソルの座標は、カーソルの左上を位置しているので要素を見た目上の縦横中央に配置するためです。

サンプルでは、イベントの発生範囲に「container」を指定していますが、座標の取得には「offsetX」「offsetY」だと要素分の位置調整(-25px)を入れると再計算が必要なのか処理落ちした感じになってしまうので「clientX」「clientY」を利用しています。

addEventListener(“mousemove")で取得可能なマウス座標の種類

また、addEventListener(“mousemove")では座標の取得には以下の指定が可能となっています。

これらはscreen()やoffset()と記述しての配列データとしては取得はできませんので注意です。

取得基準値(0,0)
clientX clientYブラウザの左上
offsetX offsetY要素の左上
pageX pageYページの左上
screenX screenYデバイスモニターの左上