1.はじめに |
ソフト等をインストールしている時、進行状態を帯状に表示していることはすでに、ご覧になっていることでしょう
このような表示を JavaScript でスライドショウに活用できないかと検討してみました。
つまり進行状況をグラフで表示します
また、説明文の文字色も順次変化させる方法を考えてみました
|
2.グラフによる表示(プログレッシブバー) |
■ サンプル
上と同じ画面が表示されますが、この中でソースをご覧下さい
なおIEの場合は枠内で右クリック → [ソースの表示] で見られます
|
GIF ファイルのダウンロード
00_space.gif : 1x1ピクセルの透明画像
bar_g.gif : 5x10ピクセルの空色の画像
|
3.文字のプログレッシブ表示 |
■ サンプル
上と同じ画面が表示されますが、この中でソースをご覧下さい
なおIEの場合は枠内で右クリック → [ソースの表示] で見られます
文字の表示速度は文字数が多ければ早く、少なければゆっくり表示されます
いずれの場合もすべてを表示する時間は約5秒です
|
4.終わりに |
如何でしょうか、こんな考え方は・・・
文字による表示は実際に私のページで採用しています
トップページでは写真の説明文を青色で経過時間と共に表示されます
また、スライドショウのページでは「スライド実行中」の文字の下側にグラフで表示されます
何かに応用できそうですね。
|
2008/03/03 文字のプログレッシブ表示追加
2008/11/28 アルゴリズムを整理 |
|