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

■ JavaScript - サンプル集(257種類) - スクロール
   - 画面上を流れる文字列 Ver2(回数制限付き)

画面上を流れていく文字列です。
機能的には、フォームを流れる文字列やステータスバーを流れる文字列と同じです。
こちらは回数制限があり、流れるのが終了後は別のメッセージを表示できます。

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

	//表示する文字を指定
	moji2="文字が流れます。流れて流れて流れて行くんだよ〜。";

	//スクロール終了時に表示する文字を指定
	moji3="スクロール終了";

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

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

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

	//スクロールの繰り返し上限を指定する
	max=500;

	//文字を装飾するタグを使用する場合、タグを記入する
	tagu1='';
	tagu2='';

	a=0;
	hajime=0;
	kazu=0;
	moji="      ";
	mojis=moji+moji+moji2;
	mojis2=mojis+moji+moji+moji;
	len=mojis.length+1;
	len2=mojis2.length+1;
	owari=Math.floor(my_width/15);
	function hyouji()
		{
		if(kazu<=max)
			{
			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.substring(hajime,len)+tagu2);
				document.layers["lay0"].document.close();
				hajime=(hajime > len)?0:hajime+1;
				}

			else if((document.getElementById) && (!document.all))
				{
				document.getElementById("lay0").style.pixelLeft=x_iti;
				document.getElementById("lay0").innerHTML=tagu1+"<nobr>"+mojis.substring(hajime,len)+"</nobr>"+tagu2;
				document.getElementById("lay0").style.width=my_width;
				hajime=(hajime > len)?0:hajime+1;
				}

			else if(document.all)
				{
				document.all("lay0").style.pixelLeft=x_iti;
				document.all("lay0").innerHTML=tagu1+"<nobr>"+mojis2.substring(hajime,owari)+"</nobr>"+tagu2;
				document.all("lay0").style.width=my_width;
				if(hajime < len2)hajime++;
				if(owari < len2)owari++;
				else {hajime=0;owari=Math.floor(my_width/15);}
				}

			kazu++;
			clearTimeout(a);
			a=setTimeout('hyouji();',hayasa);
			}
		else 
			{
			if(document.layers)
				{
				document.layers["lay0"].document.open();
				document.layers["lay0"].document.write(moji3);
				document.layers["lay0"].document.close();
				}

			if(document.all)document.all("lay0").innerHTML=moji3;
			}
		}

//-->
</script>

</head>

<body onLoad="hyouji();">

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

 ・
 ・
 ・

</body></html>


[ 解説 ]

まず表示させたい文字を書き換えます。
上から5行目の「文字が流れます。流れて流れて流れて行くんだよ〜。」にお好きな文字をお書き下さい。

流れる文字列が終了後に表示させる文字は、その下の「スクロール終了」部分を書き換えてください。

回数制限を変えたい場合は、上から7行目の「max=500;」の数値を変えて下さい。

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

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

流れる早さを変えたい場合は、上から12行目の「hayasa=150;」の数値を変えて下さい。

流れる文字列の文字の大きさを変えたり、色を変えたい場合は、 tagu1に開始タグを、tagu2に終了タグをご記入下さい。


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

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


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

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