WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)

■ JavaScript - サンプル集(257種類) - 画像
   - マウス追っかけマスコットVer3

マウスの後を追いかけてくる画像を表示します。
Ver3ではポインタが移動した軌跡を、画像がじりじりと追っていきます。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。)
ソースを見る
解説を見る





[ ソース ]

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	x_ima=0;    y_ima=0;    x_iti=new Array();   y_iti=new Array();
	my_time=0; doko=0; doko2=0;
	function basyo_han(e)
		{
		if(document.layers){x_iti[doko]=e.pageX;  y_iti[doko]=e.pageY;}
		else if((document.getElementById) && (!document.all))
			 {x_iti[doko]=e.pageX;  y_iti[doko]=e.pageY;}
		else if(document.all)
		 {x_iti[doko]=document.body.scrollLeft+event.clientX;
		  y_iti[doko]=document.body.scrollTop+event.clientY;}
		if(doko == 0)doko++;
		else if(doko > 0)
			{
			if(x_iti[doko] > x_iti[doko-1]+10 || y_iti[doko] > y_iti[doko-1]+10)doko++;
			else if(x_iti[doko] < x_iti[doko-1]-10 || y_iti[doko] < y_iti[doko-1]-10)doko++;
			}
		 }

	function hyouji()
		{
		x_ima=x_iti[doko2];
		y_ima=y_iti[doko2];

		if(document.layers){
		 document.layers["lay0"].moveTo(x_ima,y_ima);
		 document.layers["lay0"].visibility='show';}

		else if((document.getElementById) && (!document.all)){
		 document.getElementById("lay0").style.left=x_ima;
		 document.getElementById("lay0").style.top=y_ima;
		 document.getElementById("lay0").style.visibility='visible';}

		else if(document.all){
		 document.all("lay0").style.pixelLeft=x_ima;
		 document.all("lay0").style.pixelTop=y_ima;
		 document.all("lay0").style.visibility='visible';}

		doko2++;
		clearTimeout(my_time);  my_time=setTimeout('hyouji();',50);
		return false;
		}

	if(document.layers)document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove=basyo_han;

//-->
</script>

</head>

<body onLoad="hyouji();">

<!-- 下記のimgタグにマスコット画像で使いたい画像のURLを指定する -->
<span id="lay0" style="position:absolute;visibility:hidden;">
<img src="0.gif" border="0">
</span>

 ・
 ・
 ・

</body></html>


[ 解説 ]

まず表示させたい画像を用意してください。
画像は何でも良いですが、あまり大きすぎるより小さめの方がいいです。
次に上のソースを丸ごとコピーペーストして下さい。

ソースの下から7行目にイメージタグがあります。
ここに画像URLをご記入下さい。

これで終わりです。

また、もし画像が動く早さを変えたい場合は、ソースの上から5行目の「15」の数値を変えて下さい。

数値が大きければ大きいほど、早く移動します。
数値が小さければ小さいほど、遅く移動します。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.