マウスストーカー(マウスカーソルに追従)

要素がマウスカーソルに追従するマウスストーカーを実装するには、次ような方法で可能です。

サンプルコード

HTML

<div id="sample"></div>

CSS

#sample {
	position:fixed;
	z-index:1;
	width:40px;
	height:40px;
	background-color:#ccc;
}

JavaScript

var stalkerElem   = document.getElementById('sample'),
    scrollingElem = document.scrollingElement || document.documentElement || document.body;

scrollingElem.addEventListener('mousemove', function(e) {
	stalkerElem.style.top  = e.clientY + 'px';
	stalkerElem.style.left = e.clientX + 'px';
});

ページ全体のスクロール要素にマウスの移動している間に発生するイベント(mousemove)で、マウスカーソルの座標を取得(event.clientXプロパティとevent.clientYプロパティ)し、追従する要素にCSSプロパティのtopプロパティとleftプロパティに設定します。

JavaScript逆引きリファレンス一覧へ戻る