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

2020-11-222022-02-06JavaScript DOM操作,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」を指定しています。

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

let container = document.querySelector('#container');
let item = document.querySelector('#item');

let mousemove_function = () => {
	item.style.left = event.clientX - 25 + "px";
	item.style.top = event.clientY - 25 + "px";
}

container.addEventListener('mousemove', mousemove_function);

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

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

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

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

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

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

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