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

■ JavaScript - サンプル集(257種類) - スクロール
   - 画面上を流れる文字列

画面上を流れていく文字列です。
機能的には、フォームを流れる文字列やステータスバーを流れる文字列と同じです。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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="文字が流れます。流れて流れて流れて行くんだよ〜。";

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

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

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

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


	a=0;
	hajime=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(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);}
	}
	clearTimeout(a);
	a=setTimeout('hyouji();',hayasa);}

//-->
</script>

</head>

<body onLoad="hyouji();">

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

 ・
 ・
 ・

</body></html>


[ 解説 ]

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

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

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

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

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


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

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


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

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