文字列画像のスクロール

Index

　　文字列画像をスクロールさせるサンプルです。

【例】

　　<HEAD>
　　　　<SCRIPT TYPE="text/JavaScript">
　　　　<!--
　　　　var ScrMsg = "__________Welcome__________";　　// (1)
　　　　var SmallMoji = "welcom_";　　　　　　　　　　　// (2)
　　　　var cnt = 0;　　　　　　　　　　//カウンタ用変数
　　　　function prepare()　　　　　　// (3)
　　　　{
　　　　　　var i;
　　　　　　for( i = 0; i < 10; i++ ) {
　　　　　　　　document.write( "<img width='16' " );
　　　　　　　　document.write( "height='16' name='n", i, "'>" );
　　　　　　}
　　　　}
　　　　function Scroll()　　　　　　// (4)
　　　　{
　　　　　　var i, fn, msg;
　　　　　　if( cnt == ScrMsg.length - 10 ) {
　　　　　　　　cnt = 0;　　　　// (5)
　　　　　　}
　　　　　　msg = ScrMsg.substring( cnt, cnt + 10 );　　　// (6)
　　　　　　for( i = 0 ; i < 10 ; i++ ) {
　　　　　　　　fn = msg.charAt( i );　　　　　　　　// (7)
　　　　　　　　if( SmallMoji.indexOf( fn ) < 0 ) {
　　　　　　　　　　fn = fn + "l";　　// (8)
　　　　　　　　}
　　　　　　　　fn = fn + ".gif";
　　　　　　　　document.images["n"+i].src = "../../img/2/" + fn; // (9)
　　　　　　}
　　　　　　cnt++;
　　　　　　setTimeout( "Scroll()", 400 );
　　　　}
　　　　//-->
　　　　</SCRIPT>
　　</HEAD>

　　<BODY onLoad="Scroll();">　　　// (10)
　　<SCRIPTt TYPE="text/JavaScript">
　　<!--
　　prepare();　　　　// 表示したい位置に記述
　　//-->
　　</SCRIPT>
　　</BODY>
【解説】

　　必要な文字の画像( 16×16 )を下表のように用意しておく。スクロールの為の
　<img> を 10 個用意し、この画像を交換する事によって、文字列画像をスクロー
　ルさせます。
画像ファイル名
../../img/2/wl.gif
../../img/2/c.gif
../../img/2/e.gif
../../img/2/l.gif
../../img/2/m.gif
../../img/2/o.gif
../../img/2/_.gif
 　 (1) スクロールメッセージ。空白は _ です。
　 (2) 小文字か大文字か区別する為に必要。
　 (3) スクロール用に <img> を 10 個用意。
　 (4) スクロールの為の関数。
　 (5) 最後の文字の判定。
　 (6) 表示する 10 個の文字列を取得。
　 (7) 表示する文字を fn に取得。
　 (8) 大文字か、小文字か区別。
　 (9) ここで表示する文字画像に交換。
　(10) ページのロードと同時に Scroll() を実行。
【実行結果】