便利eelife Java Script

   戻る

マウスの軌跡を残す@。



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY onload="act();">
<SCRIPT language="JavaScript"><!--
make_Ly();
// --></SCRIPT>
</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
clrs = new Array('','lime','maroon','blue','fuchsia','yellow','red','aqua'); // 色を格納するための配列
M_x = new Array();
M_y = new Array();
loop = 5;
v = 0;
ID_suu=10;  // 発生させる星の数
document.onmousemove = act;

function make_Ly(){  // 星のレイヤーを作成
for (c=1; c<=ID_suu; c++)
{
document.write('<div id="Hosi'+c+'" style="position:absolute;top:-100px;left:-100px;font-size :28px;">★</div>');
}
for (i=1; i<=ID_suu; i++) { M_x[i] = -200; M_y[i] = -200;}  // 配列に初期値を代入
}

function act(){
v++;
if(v == loop){v = 0}
if (v>0) return;
else{
M_x[0] = event.x;
M_y[0] = event.y;
for (i=ID_suu; i>=1; i--)
{
M_x[i] = M_x[i-1];
M_y[i] = M_y[i-1];
document.all["Hosi"+i].style.left= M_x[i];
document.all["Hosi"+i].style.top = M_y[i];
document.all["Hosi"+i].style.color = clrs[i]; // 求めたID名の星に clrs[i] の色を表示
}
}
}

// -->
</SCRIPT>
コメント
event.x : ポインタの水平座標 (x座標 左からの位置) を取得
event.y : ポインタの垂直座標 (y座標 上からの位置) を取得

レイヤーの設置
色見本