JavaScriptのdocument.onmousemoveを使って、ブラウザ上でマウスカーソルに文字を追尾させる方法をご紹介します。
Contents
マウスカーソルに文字を追尾させるCSSの記述
※追尾させる文字#idTracにposition:absoluteを設定します。必要に応じて変更して下さい。
<style type="text/css"> <!-- body{ margin:0; padding:0; } h1{ font-size:16px; font-weight:normal; line-height:1.8em; text-align:center; padding:15px 0; } #idWrap{ width:600px; margin:0 auto; text-align:center; } #idTrac{ position:absolute; } --> </style>
document.onmousemoveを使って、ブラウザ上でマウスカーソルに文字を追尾させるJavaScriptの記述
※マウスカーソルの位置を取得し、追尾させる文字(idTrac)に対してテキストと位置を指定してます。
<script type="text/javascript"> <!-- function mousetrac() { X = event.x + document.body.scrollLeft; Y = event.y + document.body.scrollTop; document.all["idTrac"].innerText = "マウスカーソルに追尾中…"; document.all["idTrac"].style.left= X + 5; document.all["idTrac"].style.top = Y + 10; } document.onmousemove = mousetrac; --> </script>
マウスカーソルに文字を追尾させるHTMLの記述
※DOCTYPEタグの記述があるとChromeブラウザで動作しませんでした。マウスカーソルに追尾させる文字(id=”idTrac”)を用意します。必要に応じて変更して下さい。
<div id="idTrac"></div> <div id="idWrap"> <h1>マウスカーソルに文字が追尾します。</h1> </div><!--/idWrap-->
マウスカーソルに文字を追尾させるデモページ
追尾する文字を画像に変えると良い気がします。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告