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

■ JavaScript - サンプル集(257種類) - 画像
   - 動くマスコット表示

画面上を画像が移動します。
下から上へ、上から下へ、右から左へ、左から右へ、斜め下から斜め上へ、斜め上から斜め下へ、 勝手な方向に移動していきます。

画面の端まで移動すると、別の地点からまた移動を始めます。

移動速度もその時に応じて変化します。
早い時もあれば、遅い時もあります。

また移動中の画像をクリックすると、メッセージが表示されます。
メッセージは、4種類の中からランダムに表示されます。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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

	tukamaru_moji=new Array();

	//マスコット画像の横幅を指定する
	image_width=80;
	//マスコット画像の高さを指定する
	image_height=80;

	//クリックされた時に表示したいメッセージを指定する
	tukamaru_moji[0]='なにか用ですか?';
	tukamaru_moji[1]='なぁに?';
	tukamaru_moji[2]='さようなら';
	tukamaru_moji[3]='こんにちは';

	my_times=0; x_iti=0; y_iti=0; hajime=0; dotti=0; dotti2=0; hayasa=10;
	function randoms()
		{
		dotti=Math.floor(Math.random()*3);
		dotti2=Math.floor(Math.random()*2);
		hayasa=Math.floor(Math.random()*35)+10;
		x_iti=Math.floor(Math.random()*x_max);
		y_iti=Math.floor(Math.random()*y_max);
		return;
		}

	function value_change(iti)
		{if(dotti2 == 0)iti-=hayasa;   else iti+=hayasa;   return iti;}

	function hyouji()
		{
		if((document.layers) || ((document.getElementById) && (!document.all)))
			{
			x_max=outerWidth-image_width;
			y_max=outerHeight-image_height;}
		else 
			{
			x_max=document.body.clientWidth-image_width;
			y_max=document.body.clientHeight-image_height;
			}

		if(hajime != 0 && dotti == 0)
			{if(x_max > x_iti && x_iti > -image_width)x_iti=value_change(x_iti);
			else randoms(); }

		else if(hajime != 0 && dotti == 1)
			{if(y_max > y_iti && y_iti > -image_height)y_iti=value_change(y_iti);
			else randoms(); }

		else if(hajime != 0 && dotti == 2)
			{if(x_max > x_iti && x_iti > -image_width)x_iti=value_change(x_iti);
			else randoms();
			if(y_max > y_iti && y_iti > -image_height)y_iti=value_change(y_iti);
			else randoms(); }

		else 
			{hajime=1;
			dotti2=Math.floor(Math.random()*2);
			x_iti=Math.floor(Math.random()*x_max);
			y_iti=Math.floor(Math.random()*y_max);}

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

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

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

		clearTimeout(my_times);   my_times=setTimeout('hyouji();',100);
		}

	function tukamaru()
		{
		doko=Math.floor(Math.random()*4);
		alert(tukamaru_moji[doko]);
		}

//-->
</script>

</head>

<body onLoad="hyouji();">

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

 ・
 ・
 ・

</body></html>


[ 解説 ]

まず表示させたい画像を用意してください。
画像は何でも良いですが、あまり大きすぎるより小さめの方がいいです。

次に上のソースを丸ごとコピーペーストして下さい。

で、上から5行目の「image_width=80;」の「80」の部分に、 実際に使用する画像の横幅を書いてください。
同じく上から6行目の「image_height=80;」の「80」の部分に、 実際に使用する画像の長さを書いてください。

上から8〜11行目は、画像をクリックした時に表示する文字です。
お好きなように書き換えて下さい。

サンプルでは、ランダムに表示される文字が変わります。
どんな場合でも、全て同じ文字を表示したい場合は、8から11行目に同じ文字を記入してください。

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


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

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