マウスストーカー(マウスカーソルに追従)
要素がマウスカーソルに追従するマウスストーカーを実装するには、次ような方法で可能です。
サンプルコード
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プロパティに設定します。