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

■ JavaScript - サンプル集(257種類) - DHTML
   - 画面上を流れる文字列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

	moji=new Array();

	//表示する文字を指定
	moji[0]="ずいずいずっころばし ごまみそずい";
	moji[1]="茶壺にはまって どっぴんしゃん";
	moji[2]="抜けたら どんどこしょ";
	moji[3]="俵のねずみが 米食ってちゅー";
	moji[4]="ちゅーちゅーちゅー";
	moji[5]="おとさんが呼んでも おかさんが呼んでも";
	moji[6]="行きっこなぁしよ";
	moji[7]="井戸の周りでお茶碗かいたの だぁれ";

	//文字が流れる欄の横幅を指定
	my_width=300;

	//文字が流れる欄の横位置を指定
	x_iti=300;
	//文字が流れる欄の縦位置を指定
	y_iti=160;

	//流れる早さを指定
	hayasa=500;

	//一度に、縦に何列まで表示するのか指定する
	y_kazu=5;

	//文字を装飾するタグを使用する場合、タグを記入する
	tagu1='<font size="3">';
	tagu2='</font>';

	a=0;
	hajime=0;
	my_space=" <br>";
	mojis="";
	function hyouji()
		{
		if(hajime<y_kazu)
			{
			for(i=0; i<y_kazu-hajime; i++)mojis+=my_space;
			for(i=0; i<hajime; i++)mojis+=moji[i]+"<br>";
			}
		else 
			{
			for(i=j; i<j+y_kazu; i++)if(i<moji.length)mojis+=moji[i]+"<br>";
			}

		if(document.layers)
			{
			document.layers["lay0"].moveTo(x_iti,y_iti);
			document.layers["lay0"].clip.width=my_width;
			document.layers["lay0"].document.open();
			document.layers["lay0"].document.write(tagu1+mojis+tagu2);
			document.layers["lay0"].document.close();
			}

		else if((document.getElementById) && (!document.all))
			{
			document.getElementById("lay0").style.left=x_iti;
			document.getElementById("lay0").style.top=y_iti;
			document.getElementById("lay0").innerHTML=tagu1+mojis+tagu2;
			document.getElementById("lay0").style.width=my_width;
			}

		else if(document.all)
			{
			document.all("lay0").style.pixelLeft=x_iti;
			document.all("lay0").style.pixelTop=y_iti;
			document.all("lay0").style.width=my_width;
			document.all("lay0").innerHTML=tagu1+mojis+tagu2;
			}

		hajime=(hajime < moji.length+y_kazu-1)?hajime+1:0;
		if(hajime == y_kazu)j=1;
		else if(hajime > y_kazu)j++;
		mojis="";
		clearTimeout(a);
		a=setTimeout('hyouji();',hayasa);
		}

//-->
</script>

</head>

<body onLoad="hyouji();">

<span id="lay0" style="position:absolute;visibility:visible;"></span><br>

 ・
 ・
 ・

</body></html>


[ 解説 ]

まず表示させたい文字を書き換えます。
上から6行目〜13行目に書いてある文字列が、実際にサンプルで使用している文字列です。

サンプルで使用している文字列は、全部で8行有ります。
moji[0]="ずいずいずっころばし ごまみそずい";
が1行目、
moji[1]="茶壺にはまって どっぴんしゃん";
が2行目の文字列です。

文字部分を変更して、ご使用下さい。

もし使用する文字列が8行未満の場合は、不要な行を下から削除して下さい。

例えば、実際に使用する文字列は4行だけで、不要な4行を削除する場合は以下のようになります。

変更前変更後
moji=new Array();
moji[0]="ずいずいずっころばし ごまみそずい";
moji[1]="茶壺にはまって どっぴんしゃん";
moji[2]="抜けたら どんどこしょ";
moji[3]="俵のねずみが 米食ってちゅー";
moji[4]="ちゅーちゅーちゅー";
moji[5]="おとさんが呼んでも おかさんが呼んでも";
moji[6]="行きっこなぁしよ";
moji[7]="井戸の周りでお茶碗かいたの だぁれ";
moji=new Array();
moji[0]="かごめかごめ 籠の中の鳥は";
moji[1]="いついつ出やる";
moji[2]="夜明けの晩に 鶴と亀が滑った";
moji[3]="後ろの正面だぁれ";
反対に、8行以上に増やしたい場合は、必要なだけ行を増やしていきます。
増やした行は、先頭に付いている数字を変更しなければなりません。

見ていただければおわかりの通り、先頭に付いている数字は、 上から順に0,1,2,3,……・と、1つずつ大きくなっています。
同じように、増やした行も適切に数値を書き換えて下さい。

例えば、サンプルの8行を1行増やす場合は、以下のようになります。

変更前変更後
moji=new Array();
moji[0]="ずいずいずっころばし ごまみそずい";
moji[1]="茶壺にはまって どっぴんしゃん";
moji[2]="抜けたら どんどこしょ";
moji[3]="俵のねずみが 米食ってちゅー";
moji[4]="ちゅーちゅーちゅー";
moji[5]="おとさんが呼んでも おかさんが呼んでも";
moji[6]="行きっこなぁしよ";
moji[7]="井戸の周りでお茶碗かいたの だぁれ";
moji=new Array();
moji[0]="とおりゃんせ とおりゃんせ";
moji[1]="ここはどこの細道じゃ";
moji[2]="天神様の細道じゃ";
moji[3]="ちょっと通してくだしゃんせ";
moji[4]="ご用のないもの通しゃせぬ";
moji[5]="この子の7つのお祝いに";
moji[6]="お札を収めに参ります";
moji[7]="行きは良い良い 帰りは怖い";
moji[8]="怖いながらも とおりゃんせとおりゃんせ";
次に、一度に画面に表示させる行数を指定します。
上から15行目の「y_kazu=5;」の「5」をお好きな数字に変更して下さい。

サンプルでは、一度に5行表示されるように設定していますから、 「5」と書いてあります。

その下の16行目にある「hayasa=500;」では、文字が流れる早さを指定しています。

実際に動作を見ながら、「500」の部分をお好みの数値に書き換えて下さい。

次に、流れる文字列が表示される幅を決めます。
上から17行目の「my_width=300;」の「300」の部分を変えてください。

流れる文字列が表示される位置を変えるには、 上から18行目の「x_iti=300;」と上から19行目の「y_iti=160;」の数値を変えてください。

流れる文字列の文字の大きさを変えたり、色を変えたい場合は、 上から21行目と22行目を書き替えます。
tagu1に開始タグを、tagu2に終了タグをご記入下さい。


tagu1='<font size="4"><b>';
tagu2='</font></b>';

何も指定したくない場合は、記入しないでください。


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

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