// 起動と共に、徐々に画像を表示、または消す

起動時に、徐々に画像を表示、または消す JavaScript

表現の特徴

 * ＨＴＭＬファイルがスタートすると、徐々に画像が表示、または消します。
 * 数値の設定だけで、画像の指定や、表示、または消え方の調整が出来ます。
 * このテンプレートは、Internet　Explorer 6 のみ動作確認しています。
     Netscape 7 では、正しく表示（徐々に変化しない）されません。

設定方法

まず、「ソースファイル」を、指示に従いコピーアンドペーストします。
「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。

 ■ 画面左端から画像左端までの距離をピクセル値で入力します。
 ■ 画面上端から画像上端までの距離をピクセル値で入力します。
 ■ 表示したい数の画像を、アドレスを含むファイル名で指定します。
 ■ 徐々に表示する時はここの数字を 1 に、徐々に消滅させる時は -1 に設定。
 ■ 画像が徐々に変化する速さの値を入力します。
    数字が大きいほどゆっくり変化します。（秒数ではありません）
 ■ 動きの全体の速さを入力します。（大きいほど速いが、負担大）

// ****************************  入力事項  *******************************
// ======= 入力１：画像の種類の入力
// 出したい画像の種類を必要数だけ入力（0から順に）
// １番目の数字で、画面左端から画像左端までの距離を入力（ピクセル）
// ２番目の数字で、画面上端から画像上端までの距離を入力（ピクセル）
// ３番目でアドレスを含む画像ファイル名を入力
gazo[0]=new Array(  70,120, "../parts/kumo.gif" );
gazo[1]=new Array( 280,270, "../parts/kumo.gif" );
gazo[2]=new Array( 180,400, "../parts/kumo.gif" );
// ======= 入力２：表示の調整
var swit=   1 ;   // 画像の変化の仕方を設定 ( 1: 表示する   -1: 消滅する )
var ed  = 200 ;   // 画像が徐々に変化する時間で、大きいほど長い（目安値 200）
// 速さが足りない（荒い）場合は、次の数値を大きくする
var chg =  10 ;   // 一秒当たりの描画の切替え回数  （目安値 10）
// ************************** 入力事項ここまで ***************************

更新履歴

・ 05/01/30　ver 0.50　内部構造の修正他。
・ 03/11/12　ver 0.40　スタート時に一瞬画像が現れるのを修正他。
・ 03/04/21　ver 0.30　複数の画像を使えるように更新した。
・ 03/04/19　ver 0.20　表示、消滅を一本のプログラムにまとめる。
・ 03/02/05　ver 0.10　表示の更新
・ 03/01/15　ver 0.01　初　公　開

使用画像

・画像はｓｏｚａｉ　ｗｉｎｇさんから借りました。

ソースファイル

・下記の部分をコピーアンドペーストして使って下さい。（<body>～</body>の間に置く）

<script type="text/javascript">
<!-- // disp_chg ver0.51 （ぱーぷりんの溜まり場）
gazo = new Array();   // この行を変えないで・・・

// ****************************  入力事項  *******************************
// ======= 入力１：画像の種類の入力
// 出したい画像の種類を必要数だけ入力（0から順に）
// １番目の数字で、画面左端から画像左端までの距離を入力（ピクセル）
// ２番目の数字で、画面上端から画像上端までの距離を入力（ピクセル）
// ３番目でアドレスを含む画像ファイル名を入力
gazo[0]=new Array(  70,120, "../parts/kumo.gif" );
gazo[1]=new Array( 280,270, "../parts/kumo.gif" );
gazo[2]=new Array( 180,400, "../parts/kumo.gif" );
// ======= 入力２：表示の調整
var swit=   1 ;   // 画像の変化の仕方を設定 ( 1: 表示する   -1: 消滅する )
var ed  = 200 ;   // 画像が徐々に変化する時間で、大きいほど長い（目安値 200）
// 速さが足りない（荒い）場合は、次の数値を大きくする
var chg =  10 ;   // 一秒当たりの描画の切替え回数  （目安値 10）
// ************************** 入力事項ここまで ***************************

 var n=gazo.length-1;

 for(i=0; i<=n; i++){
  document.write("<img src='"+gazo[i][2]+"' style='position:absolute;"
   +"filter:alpha(opacity=0);' id='img"+i+"'>");
  Disp("img"+i, gazo[i][0], gazo[i][1]) }

 if(swit >0) { inc=0 } else{ inc=100 }
 sakura();

// 表示を変化させる
function sakura() {
 for(i=0; i<=n; i++){
   document.all("img"+i).filters.alpha.opacity = inc }
 if(swit > 0){
   if(inc <= 100){
     inc+=400/ed; tim=setTimeout("sakura()", 1000/chg) }
   else {
     clearTimeout(tim) } }
 else{
   if(inc >= 0){
     inc-=400/ed; tim=setTimeout("sakura()",1000/chg) }
   else {
     clearTimeout(tim) } } }

// 画像を移動する
function Disp(num,xx,yy){
  document.getElementById(num).style.left=xx;
  document.getElementById(num).style.top =yy }
//-->
</script>