| ポイント |
<![CDATA[
mx[count] = event.x;
my[count] = event.y;
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];
}
]]>
|
| 説 明 |
マウスの軌跡を残すにはマウスが移動したら座標を配列に格納していきます。マウスが移動するごとに格納した座標の中で古いものを削除していき、現在のマウス座標を新たに配列に格納していきます。格納された座標をもとに軌跡となる画像を表示していけばマウスに追従する軌跡を残すことができます。 |
| サンプル |
<![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;
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">
マウスの軌跡を残す<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>
]]>
|
| 補足説明 |
マウスを動かさなくても軌跡が移動するようにするにはbodyタグにonLoad="setInterval('trail()',50);"のように記述し定期的に関数を呼び出すようにします。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
マウスの軌跡を残す