便利eelife Java Script

   戻る

マウスの軌跡を残しますA。



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY onload="setInterval('kiseki()',150)"><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 = 6;
v = 0;
ID_suu=7; // 発生させる星の数
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=0; 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;
}
kiseki()
}
function kiseki(){
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>
コメント
setInterval(処理関数, 時間間隔) : 決まった時間間隔で実行される関数を実行します。
時間間隔は千分の一秒単位です。

event.x : ポインタの水平座標 (x座標 左からの位置) を取得
event.y : ポインタの垂直座標 (y座標 上からの位置) を取得

レイヤーの設置
色見本