|
 |
|
マウスの軌跡を表示する
サンプルと機能
マウスカーソルが残像を残して移動します。
→ Sample
1：マウスの軌跡を表示する
→ Sample
2：マウスに複数の画像を追従させる
軌跡に使う画像の数、間隔などは指定できます。
サンプル・ソース
緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
→ Sample
1：マウスの軌跡を表示する
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
//
マウスの軌跡を表示する
cnt = 4; // 軌跡(画像)の数
step = 5; // 軌跡の長さ。大きいほど長くなる
mvcnt = 0;
mx = new
Array();
my = new Array();
for(i=1; i<=cnt; i++) {
mx[i] =
-100;
my[i] = -100;
}
function mouseLocus()
{
mvcnt++;
mvcnt %= step;
if(mvcnt) return;
mx[cnt] =
event.x - 2; // 画像を表示する位置
my[cnt] = event.y
- 2; // 画像を表示する位置
expLocus();
}
function expLocus() {
for(i=1; i<=cnt; i++)
{
mx[i-1] = mx[i];
my[i-1] = my[i];
document.all["ID"+i].style.left= mx[i-1];
document.all["ID"+i].style.top = my[i-1];
}
}
document.onmousemove =
mouseLocus;
//-->
</SCRIPT>
</HEAD>
<!--
数値は軌跡を元の位置に戻す時間。多いほどゆっくり戻る -->
<BODY bgcolor="#ffffff" onLoad="setInterval('expLocus()',100);">
<div
id="ID1" style="position:absolute;"><img src="img/sm04.gif"></div>
<div id="ID2" style="position:absolute;"><img src="img/sm03.gif"></div>
<div id="ID3" style="position:absolute;"><img src="img/sm02.gif"></div>
<div id="ID4" style="position:absolute;"><img src="img/sm01.gif"></div>
マウスポインタの座標を表示しています。
</BODY>
</HTML> |
→ Sample
2：マウスに複数の画像を追従させる
Sample
1とほぼ同じですので省略します。
サンプルページより「右クリック」→「ソースの表示」でプログラムを確認できます。 |
解説・注意点など
必ず画像を用意して、
<div id="ID4" style="position:absolute;"><img src="img/sm01.gif"></div>
のように指定してください。
その際、一番下になる画像から順番に書いていきます。
（サンプルではsm01.gifが一番上に重なる画像）
画像を用意するのが面倒な方 → sm01.gif,sm02.gif,sm03.gif,sm04.gif
← Webデザインテクニックに戻る
|
|
|
