SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [マウスストーカー２]

マウスストーカー２

機能

マウスの後を点が追っかけていくスクリプトです。

類似サンプル

利用方法

ヘッダにスクリプトを、本文にdiv要素にid属性を「iL0」「iL1」・・・のように連番でふっていきます。その数に対応した数をスクリプト内の「maxLay」に指定します。

点の色は「Col」配列内の値を増やすことも減らすことも可能です。カラーコードで指定して下さい。

最大点数: maxLay：マウスを追跡する点の最大数を指定します。ただし、その数分だけdiv要素を指定する必要があります。例えば、30を指定した場合、「iL0」から「iL29」までの３０個のdiv要素が必要です。この時、属性値は必ず連番にして下さい。
追跡速度: actT：マウスを追跡する点の速度を指定します。小さくするほど速くなります。
点の色: Col：追跡する点の色を指定します。配列内にカラーコードを指定します。この数は増やすことも減らすことも可能です。
点の大きさ: 追跡する点の大きさを変更するにはスタイルで対応します。 CSS指定している「Style1」の「width」「height」「font-size」を変更して下さい。

対応ブラウザ

IE4,IE5,NN4,N6

サンプル

［サンプルを見る］［ダウンロード］

[Go To Top]

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>マウスストーカー２</title>

<style type="text/css">
<!--
.Style1{
	position:		absolute;
	top:			0px;
	left:			0px;
	width:			3px;
	height:			3px;
	font-size:		3px;
}
-->
</style>

<script language="JavaScript">
<!--
var maxLay = 10;			//最大点数
var actT = 20;				//追跡速度（小→速い）
var Col= new Array("f00","0f0","00f","ff0","f0f","0ff","fff");
							//点の色

var count = 0;
var my = 0;
var mx = 0;

var lay;
var coln;

if(document.all){
	document.onmousemove = Mmove;
}else if(document.layers){
	window.captureEvents(Event.MOUSEMOVE);
	window.onMouseMove = Mmove;
}else if(document.getElementById){
	document.onmousemove = Mmove;
}

function Mmove(e){
	gct = 1;
	if(document.all){
		mx = event.x;
		my = event.y;
	}else if(document.layers){
		mx = e.pageX;
		my = e.pageY;
	}else if(document.getElementById){
		mx = e.pageX;
		my = e.pageY;
	}
}

function main(){
	for (i = 0; i < (maxLay - 1); i++){
		coln = Math.round( Math.random() * Col.length - 1 );
		if(document.all){
			document.all("iL"+i).style.backgroundColor = Col[coln];
			document.all("iL"+i).style.left = document.all("iL"+(i+1)).style.left;
			document.all("iL"+i).style.top  = document.all("iL"+(i+1)).style.top;
		}else if(document.layers){
			document.layers["iL"+i].bgColor = Col[coln];
			document.layers["iL"+i].left = document.layers["iL"+(i+1)].left;
			document.layers["iL"+i].top  = document.layers["iL"+(i+1)].top;
		}else if(document.getElementById){
			document.getElementById("iL"+i).style.backgroundColor = Col[coln];
			document.getElementById("iL"+i).style.left = document.getElementById("iL"+(i+1)).style.left;
			document.getElementById("iL"+i).style.top  = document.getElementById("iL"+(i+1)).style.top;
		}
	}
	coln = Math.round( Math.random() * Col.length - 1 );
	if(document.all){
		document.all("iL"+(maxLay-1)).style.backgroundColor = Col[coln];
		document.all("iL"+(maxLay-1)).style.left = mx;
		document.all("iL"+(maxLay-1)).style.top  = my;
	}else if(document.layers){
		document.layers["iL"+(maxLay-1)].bgColor = Col[coln];
		document.layers["iL"+(maxLay-1)].left = mx;
		document.layers["iL"+(maxLay-1)].top  = my;
	}else if(document.getElementById){
		document.getElementById("iL"+(maxLay-1)).style.backgroundColor = Col[coln];
		document.getElementById("iL"+(maxLay-1)).style.left = mx;
		document.getElementById("iL"+(maxLay-1)).style.top  = my;
	}
	count++;
	setTimeout('main()',actT);
}

//-->
</script>


</head>

<body onload="main()">

<div class="Style1" id="iL0"> </div>
<div class="Style1" id="iL1"> </div>
<div class="Style1" id="iL2"> </div>
<div class="Style1" id="iL3"> </div>
<div class="Style1" id="iL4"> </div>
<div class="Style1" id="iL5"> </div>
<div class="Style1" id="iL6"> </div>
<div class="Style1" id="iL7"> </div>
<div class="Style1" id="iL8"> </div>
<div class="Style1" id="iL9"> </div>

</body>
</html>

[Go To Top]