画像を徐々に大きくする JavaScript

動きの特徴

 * ランダムに発生した画像が徐々に大きくなり、ある程度大きくなると消え、
   新しい画像が発生。
   　その時、画像の切り替えが出来ます。
   　また、全部描写と、一つの画像を残し画像の表示と非表示の交互描写の、選択が出来ます。
 * 使える画像の種類・数・大きくなる速さ・表示範囲が、数値の設定だけで変えられます。
 * スクロールに対応・非対応を選択出来ます。
 * Internet　Explorer 6 および Netscape 7 で動作確認しています。

設定方法

「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。

 ■ その画像の表示範囲の、画面上端から、左端からの距離(px) を指定します。
 ■ その画像の表示範囲の、幅、高さ(px) を指定します。
      「0」を指定すると、幅は画面右端まで、高さは画面下端まで表示されます。
 ■ 画像が大きくなる 速さ を指定します。
 ■ 表示したい画像を、アドレスを含むファイル名で指定します。
     画像を２つ以上指定すると、発生する度に画像がに変わり、指定順に繰り返します。
 ■ 画面に同時に出したい画像数を入力します。
 ■ 途中で流れる画像を１個だけにするなら 1 を指定。
        （この時、１つ表示される画像は ugoku[0] で指定した画像になります。）
      ずっと指定数の画像を表示するなら -1 を指定。
 ■ 画面をスクロールさせた時、画像も同時に移動させるか？ （ yes = 1 , no = -1 ）
 ■ 動きの全体の速さを入力します。（大きいほど速いが、負担大）

// *****************************  入力事項  ******************************
// ======= 入力１：画像の種類と,動き方,および範囲（0から順に必要数だけ入力）
// １～２番目の数字で表示範囲の画面「上」・「左」からの各距離( pix )を入力
// ３～４番目の数字で「表示幅」と「表示高さ」( pix )を入力
//     「 0 」の場合はそれぞれ、画面右端まで、下端まで表示する。
// ５番目の数字で、画像の大きくなる速さを指定　（目安値 10）
// ６番目の数字で、出したい画像を、アドレスを含むファイル名で指定
ugoku[0]=new Array( 0,0, 0,0, 10, "../parts/samp1.gif",
         "../parts/samp5.gif", "../parts/samp9.gif" );
ugoku[1]=new Array( 0,0, 0,0, 10, "../parts/samp2.gif",
         "../parts/samp6.gif", "../parts/sampa.gif" );
// ======= 入力２：補助入力事項
var no  =  6 ;   // 画面に同時に出す画像数を入力
var hsw =  1 ;   // 途中で流れる画像を１個だけするか？（ yes=1 , no=-1 ）
                 //   １個表示されるのは、ugoku[0]で指定した画像です。
var srl =  1 ;   // 画像も同時にスクロールさせるか？  （ yes=1 , no=-1 ）
  // 以上の調整で、速さが足りない（荒い）場合は、次の数値を大きくする
var chg = 10 ;   // 一秒当たりの描画の切替え回数（初期値 10）
// *************************** 入力事項ここまで **************************

更新履歴

・05/03/20　ver 1.00　画像の切替え可能。Internet Explorer 6 および Netscape 7 に対応。他
・03/07/13　ver 0.10　画像が大きく成るにつれ、右下に移動するのを修正
・03/06/01　ver 0.00　初　公　開

使用画像

・画像は、Engel Heart さんから借りました。

ソースファイル

・下記の部分をコピーアンドペーストして使って下さい。（<body>～</body>の間に置く）
・ここのプログラムをコピーして下さい。（使用例ではバージョンが古いかも？）

<!--// syabon  ver1.00  （ぱーぷりんの溜まり場）
 ugoku=new Array();   // この行は触らないで・・

// *****************************  入力事項  ******************************
// ======= 入力１：画像の種類と,動き方,および範囲（0から順に必要数だけ入力）
// １～２番目の数字で表示範囲の画面「上」・「左」からの各距離( pix )を入力
// ３～４番目の数字で「表示幅」と「表示高さ」( pix )を入力
//     「 0 」の場合はそれぞれ、画面右端まで、下端まで表示する。
// ５番目の数字で、画像の大きくなる速さを指定　（目安値 10）
// ６番目の数字で、出したい画像を、アドレスを含むファイル名で指定
ugoku[0]=new Array( 0,0, 0,0, 10, "../parts/samp1.gif",
         "../parts/samp5.gif", "../parts/samp9.gif" );
ugoku[1]=new Array( 0,0, 0,0, 10, "../parts/samp2.gif",
         "../parts/samp6.gif", "../parts/sampa.gif" );
// ======= 入力２：補助入力事項
var no  =  6 ;   // 画面に同時に出す画像数を入力
var hsw =  1 ;   // 途中で流れる画像を１個だけするか？（ yes=1 , no=-1 ）
                 //   １個表示されるのは、ugoku[0]で指定した画像です。
var srl =  1 ;   // 画像も同時にスクロールさせるか？  （ yes=1 , no=-1 ）
  // 以上の調整で、速さが足りない（荒い）場合は、次の数値を大きくする
var chg = 10 ;   // 一秒当たりの描画の切替え回数（初期値 10）
// *************************** 入力事項ここまで **************************

//  共通変数・配列の設定
var offW, offH, docX, docY;
dom=new Array(); d0=new Array(); dr=new Array(); dm=new Array(); spd=new Array();
imgH=new Array(); imgW=new Array(); xza=new Array(); yza=new Array();
margT=new Array(); margL=new Array(); dispW=new Array(); dispH=new Array();
Gy=new Array(); Gx=new Array(); Gp=new Array();

// 開始値の設定 
imgN=0; dpsw=1; prima=-1;
brSize();
for(i=0; i<no; i++){
 Gy[i]=imgN; Gx[i]=ugoku[imgN].length; Gp[i]=5;
 document.write("<span id='lay"+i+"' style='position:absolute; z-index:61;'>"
   +"<img src='"+ugoku[imgN][5]+"' id='img"+i+"'></span>");
 margT[i]=ugoku[imgN][0]; margL[i]=ugoku[imgN][1];
 dispW[i]=ugoku[imgN][2]; dispH[i]=ugoku[imgN][3]; spd[i]=ugoku[imgN][4];
 prim(i);
 Disp(i, xza[i]+offW, yza[i]+offH);
 if(imgN==(ugoku.length-1)){ imgN=0 } else{ imgN++ } }
syabon();

// メインルーチン
function syabon(){ brSize();
for(i=0; i<no; i++){
 dom[i]+=dr[i];
  if(dom[i]>dm[i]){ prim(i) }
 x1=xza[i]+imgW[i]/2*(1-dom[i]);
 y1=yza[i]+imgH[i]/2*(1-dom[i]);
 Disp(i, x1+offW, y1+offH) }
 setTimeout("syabon()",1000/chg) }

// 初期データ発生
function prim(i){ brSize();
if (hsw>0){
 if(prima>0 && i==0){
  if(dpsw>0){ visi="hidden"; dpsw=-1 } else{ visi="visible"; dpsw=1 }
  for(k=1; k<no; k++){ document.getElementById("lay"+k).style.visibility=visi }
  } }; prima=1;
 document.getElementById("img"+i).src=ugoku[Gy[i]][Gp[i]]; Gp[i]++;
  if(Gp[i]>=Gx[i]){ Gp[i]=5 }
 imgH[i]=document.getElementById("img"+i).height;
 imgW[i]=document.getElementById("img"+i).width;
 if(dispW[i]==0){dispW[i]=docX-margL[i]};
 if(dispH[i]==0){dispH[i]=docY-margT[i]};
 dom[i]= 0.10+0.3*Math.random();         // 画像の倍率
 dr[i] = 0.01+spd[i]*Math.random()/500;  // 画像の大きくなる速さ
 dm[i] = 0.50+1*Math.random();           // 画像が消える大きさ
 xza[i]=margL[i]+Math.random()*(dispW[i]-imgW[i]);
 yza[i]=margT[i]+Math.random()*(dispH[i]-imgH[i]) }

// ブラウザのサイズを調べる
function brSize(){
 if(document.all){
  docX=document.body.clientWidth; docY=document.body.clientHeight;
  offW=document.body.scrollLeft; offH=document.body.scrollTop }
 else if(document.getElementById){
  docX=window.innerWidth; docY=window.innerHeight;
  offW=window.scrollX; offH=window.scrollY }
 if(srl < 0){ offW=0; offH=0 } }

// 画像を拡大・移動する
function Disp(z,xx,yy){
 document.getElementById("img"+z).width =dom[z]*imgW[z];
 document.getElementById("img"+z).height=dom[z]*imgH[z];
 document.getElementById("lay"+z).style.left=xx;
 document.getElementById("lay"+z).style.top =yy }

// End -->
</script>