| ポイント |
<![CDATA[
function trail()
{
mvcnt++;
mvcnt %= step;
if (mvcnt) return;
mx[count] = event.x;
my[count] = event.y;
trail2();
}
function trail2()
{
for (i=1; i<=count; i++)
{
mx[i-1] = mx[i];
my[i-1] = my[i];
document.all["ms"+i].style.left= mx[i-1];
document.all["ms"+i].style.top = my[i-1];
}
}
document.onmousemove = trail;
<body bgcolor="white" onLoad="setInterval('trail2()',50);">
]]>
|
| 説 明 |
マウスの軌跡を残すにはマウスが移動したら座標を配列に格納していきます。マウスが移動するごとに格納した座標の中で古いものを削除していき、現在のマウス座標を新たに配列に格納していきます。格納された座標をもとに軌跡となる画像を表示していけばマウスに追従する軌跡を残すことができます。マウスが止まっても追従させるためsetInterval()で配列内容と軌跡を表示する関数を定期的に呼び出します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>マウスの軌跡を残す（マウスが止まっても追従）</title>
<script Language="JavaScript"><!--
mx = new Array();
my = new Array();
count = 4;
step = 2;
mvcnt = 0;
for (i=1; i<=count; i++) { mx[i] = -100; my[i] = -100; }
function trail()
{
mvcnt++;
mvcnt %= step;
if (mvcnt) return;
mx[count] = event.x;
my[count] = event.y;
trail2();
}
function trail2()
{
for (i=1; i<=count; i++)
{
mx[i-1] = mx[i];
my[i-1] = my[i];
document.all["ms"+i].style.left= mx[i-1];
document.all["ms"+i].style.top = my[i-1];
}
}
document.onmousemove = trail;
// --></script>
</head>
<body bgcolor="white" onLoad="setInterval('trail2()',50);">
マウスの軌跡を残す<br>
マウスを動かすと軌跡が移動<br>
<div id="ms1" style="position:absolute;"><img src="image.gif"></div>
<div id="ms2" style="position:absolute;"><img src="image.gif"></div>
<div id="ms3" style="position:absolute;"><img src="image.gif"></div>
<div id="ms4" style="position:absolute;"><img src="image.gif"></div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
マウスに文字を追従させる（マウスが止まっても追従）