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

マウスストーカー２．１

機能

マウスの後を画像が追っかけていくスクリプトです。画像はお好きなものを使えますので、様々な演出が可能です。

類似サンプル

利用方法

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

画像はBODY要素中のIMG要素に指定します。追いかけてくる順番の早い順に指定します。（「iL0」「iL1」・・・の順番）

最大点数: maxLay：マウスを追跡する画像の最大数を指定します。ただし、その数分だけdiv要素を指定する必要があります。例えば、30を指定した場合、「iL0」から「iL29」までの３０個のdiv要素が必要です。この時、属性値は必ず連番にして下さい。
追跡速度: actT：マウスを追跡する画像の速度を指定します。小さくするほど速くなります。

対応ブラウザ

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;
	visibility:		hidden;
}
-->
</style>

<script language="JavaScript">
<!--
var maxLay = 12;			//最大点数
var actT = 20;				//追跡速度（小→速い）

var count = 0;
var my = -100;
var mx = -100;
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 Init(){
	for (i = 0; i < (maxLay - 1); i++){
		if(document.all){
			document.all("iL"+i).style.visibility = "visible";
		}else if(document.layers){
			document.layers["iL"+i].visibility = "show";
		}else if(document.getElementById){
			document.getElementById("iL"+i).style.visibility = "visible";
		}
	}
	main();
}

function main(){
	for (i = 0; i < (maxLay - 1); i++){
		if(document.all){
			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].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.left = document.getElementById("iL"+(i+1)).style.left;
			document.getElementById("iL"+i).style.top  = document.getElementById("iL"+(i+1)).style.top;
		}
	}
	if(document.all){
		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)].left = mx;
		document.layers["iL"+(maxLay-1)].top  = my;
	}else if(document.getElementById){
		document.getElementById("iL"+(maxLay-1)).style.left = mx;
		document.getElementById("iL"+(maxLay-1)).style.top  = my;
	}
	count++;
	setTimeout('main()',actT);
}

//-->
</script>


</head>

<body onload="Init()">

<div class="Style1" id="iL0"><img src="image/circle01.png" alt=""></div>
<div class="Style1" id="iL1"><img src="image/circle02.png" alt=""></div>
<div class="Style1" id="iL2"><img src="image/circle03.png" alt=""></div>
<div class="Style1" id="iL3"><img src="image/circle04.png" alt=""></div>
<div class="Style1" id="iL4"><img src="image/circle05.png" alt=""></div>
<div class="Style1" id="iL5"><img src="image/circle06.png" alt=""></div>
<div class="Style1" id="iL6"><img src="image/circle07.png" alt=""></div>
<div class="Style1" id="iL7"><img src="image/circle08.png" alt=""></div>
<div class="Style1" id="iL8"><img src="image/circle09.png" alt=""></div>
<div class="Style1" id="iL9"><img src="image/circle10.png" alt=""></div>
<div class="Style1" id="iL10"><img src="image/circle11.png" alt=""></div>
<div class="Style1" id="iL11"><img src="image/circle12.png" alt=""></div>

</body>
</html>

[Go To Top]