トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

■ スライド文字のフェードアウト

文字をスライドさせながら自動表示後、フェードアウトします。
電光掲示板のような表示が可能です。

文字数や文字行数に制限はありません。
すべて自動認識します。

◆ 実行サンプル

略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「slidtxt0.js」というファイル名で保存します。
var txt = new Array(); txt[0]="                                    "; txt[1]="ようこそ【超初心者のホームページ作成】へ"; txt[2]="ここには様々なサンプルがあります。"; txt[3]="使えそうなものがあったらどんどん使用してください。"; mmax = 3; //メッセージ行数 ispeed = 0; //表示スピード ospeed = 10; //消去スピード ddelay = 2000; //表示時間(ミリ秒) hdelay = 1000; //非表示時間(ミリ秒) wdelay = 2000; //待機時間(ミリ秒) slide_set(); function slide_set(){ midx = 1; strcnt0 = 0; setTimeout("slide_in()", 0); } function slide_in(){ document.frm1.txt1.style.color = 0; txt0 = txt[0] + txt[midx]; txt0 = txt0.substr(strcnt0++); document.frm1.txt1.value = txt0; if (strcnt0 >= txt[0].length+1) { strcnt0 = 0; setTimeout("fade_out()", ddelay); }else{ setTimeout("slide_in()", ispeed); } } function fade_out() { document.frm1.txt1.value = txt[midx]; document.frm1.txt1.style.color = 0x111111 * strcnt0++; if (strcnt0 >= 15) { midx++;if (midx > mmax) { midx = 1; } strcnt0 = 0; if (midx == 1) { setTimeout("slide_in()", wdelay); }else{ setTimeout("slide_in()", hdelay); } }else{ setTimeout("fade_out()", ospeed); } }


そして表示用のフォームJavascriptの呼び出しを次のように記述します。 <form name="frm1" align="center"> <input type="text" name="txt1" size="60"> </form> <script type="text/javascript" src="./js/slidtxt1.js"></script>



page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom