画像を不規則に移動させる JavaScript
戻 る

動きの特徴
 * 方向、早さ、向き共に、全くルールがなく、不規則に反復移動します。
 * 反復する度に、画像の切り替えが出来ます。
   その時、全部描写と、一つの画像を残し画像の表示と非表示の交互描写の、選択が出来ます。
 * 数値の設定だけで、画像の種類毎に、画像の指定や、動きの調整が出来ます。
 * スクロールに対応・非対応を選択出来ます。
 * Internet Explorer 6 および Netscape 7 で動作確認しています。

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

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

// *****************************  入力事項  ******************************
// ======= 入力1:画像の種類と流れる範囲
// 1〜2番目の数字で表示範囲の画面「上」・「左」からの各距離( px )を入力
// 3〜4番目の数字で「表示幅」と「表示高さ」( px )を入力
//     「 0 」の場合はそれぞれ、画面右端まで、下端まで表示する
// 5番目の数字で、移動の方向の最大速さを入力(大きい程速い 目安値 50)
// 6番目の数字で、同じ変化を繰り返す、最大回数(目安値 50)
// 7番目以降で、出したい画像の種類を必要数だけ入力(0から順に)
//     画像が2つ以上あるときは、反復する度に、画像が変わる。
ugoku[0]=new Array(0,0, 0,0, 50, 50, "../parts/samp1.gif",
         "../parts/samp5.gif", "../parts/samp9.gif");
ugoku[1]=new Array(0,0, 0,0, 40, 40, "../parts/samp2.gif",
         "../parts/samp6.gif", "../parts/sampa.gif");
ugoku[2]=new Array(0,0, 0,0, 30, 30, "../parts/samp3.gif",
         "../parts/samp7.gif", "../parts/sampb.gif");
// ======= 入力2:動きの調整
var no  =  9 ;  // 画面に同時に出す画像数を入力
var hsw =  1 ;  // 途中で流れる画像を1個だけするか?( yes=1 , no=-1 )
                //   1個表示されるのは、ugoku[0]で指定した画像です。
var srl =  1 ;  // 画像を同時にスクロールさせるか?  ( yes=1 , no=-1 )
  // 以上の調整で、速さが足りない(荒い)場合は、次の数値を大きくする
var chg = 10 ;  // 一秒当たりの描画の切替え回数(初期値 10)
// *************************** 入力事項ここまで **************************

更新履歴
・05/01/13 ver 1.00 画像の切替え可能。Internet Explorer 6 および Netscape 7 に対応。他
・04/04/04 ver 0.00 初 公 開

使用画像
・画像は、Engel Heart さんから借りました。
ソースファイル
・下記の部分をコピーアンドペーストして使って下さい。 (<body>〜</body>の間に置く)
・ここのプログラムをコピーして下さい。(使用例ではバージョンが古いかも?)
<script type="text/javascript">
<!--// random ver 1.00  (ぱーぷりんの溜まり場)
ugoku=new Array();   // この行は触らないで・・

// *****************************  入力事項  ******************************
// ======= 入力1:画像の種類と流れる範囲
// 1〜2番目の数字で表示範囲の画面「上」・「左」からの各距離( px )を入力
// 3〜4番目の数字で「表示幅」と「表示高さ」( px )を入力
//     「 0 」の場合はそれぞれ、画面右端まで、下端まで表示する
// 5番目の数字で、移動の方向の最大速さを入力(大きい程速い 目安値 50)
// 6番目の数字で、同じ変化を繰り返す、最大回数(目安値 50)
// 7番目以降で、出したい画像の種類を必要数だけ入力(0から順に)
//     画像が2つ以上あるときは、反復する度に、画像が変わる。
ugoku[0]=new Array(0,0, 0,0, 50, 50, "../parts/samp1.gif",
         "../parts/samp5.gif", "../parts/samp9.gif");
ugoku[1]=new Array(0,0, 0,0, 40, 40, "../parts/samp2.gif",
         "../parts/samp6.gif", "../parts/sampa.gif");
ugoku[2]=new Array(0,0, 0,0, 30, 30, "../parts/samp3.gif",
         "../parts/samp7.gif", "../parts/sampb.gif");
// ======= 入力2:動きの調整
var no  =  9 ;  // 画面に同時に出す画像数を入力
var hsw =  1 ;  // 途中で流れる画像を1個だけするか?( yes=1 , no=-1 )
                //   1個表示されるのは、ugoku[0]で指定した画像です。
var srl =  1 ;  // 画像を同時にスクロールさせるか?  ( yes=1 , no=-1 )
  // 以上の調整で、速さが足りない(荒い)場合は、次の数値を大きくする
var chg = 10 ;  // 一秒当たりの描画の切替え回数(初期値 10)
// *************************** 入力事項ここまで **************************

//  共通変数・配列の設定
var off_w, off_h, doc_x, doc_y;
xza=new Array(); yza=new Array(); img_w=new Array(); img_h=new Array();
stx=new Array(); sty=new Array(); xflg =new Array(); yflg =new Array();
marg_t=new Array(); marg_l=new Array(); disp_w=new Array(); disp_h=new Array();
Gy=new Array(); Gx=new Array(); Gp=new Array();

//  初期値の設定
ingN=0; dpsw=1; brSize();
for(i=0; i<no; i++){
 Gy[i]=ingN; Gx[i]=ugoku[ingN].length-1; Gp[i]=6;
 document.write("<div id='dot"+i+"' style='position:absolute; z-index:55'>"
   +"<img src='"+ugoku[Gy[i]][Gp[i]]+"' id='img"+i+"'></div>")
 img_h[i]=document.getElementById("img"+i).height;
 img_w[i]=document.getElementById("img"+i).width;
  marg_t[i]=ugoku[ingN][0]; marg_l[i]=ugoku[ingN][1];
  disp_w[i]=ugoku[ingN][2]; disp_h[i]=ugoku[ingN][3];
 if(disp_w[i]==0){ disp_w[i]=doc_x-marg_l[i] }
 if(disp_h[i]==0){ disp_h[i]=doc_y-marg_t[i] }
 primX(i); primY(i);
 xza[i]=marg_l[i]+Math.random()*(disp_w[i]-img_w[i]);
 yza[i]=marg_t[i]+Math.random()*(disp_h[i]-img_h[i]);
  if(ingN==(ugoku.length-1)){ ingN=0 } else{ ingN+=1 } }
Zahyo();

// メインルーチン
function Zahyo(){ brSize();
for(i=0; i<no; ++i){ Size(i);
 xflg[i]--; yflg[i]--;
 xza[i]+=stx[i]; yza[i]+=sty[i]
   if(xflg[i]<=0){ primX(i) }
   if(yflg[i]<=0){ primY(i) }

 if(xza[i]>marg_l[i]+disp_w[i]-img_w[i]){ hen=0;
   stx[i]=-stx[i]; xza[i]=marg_l[i]+disp_w[i]-img_w[i]; kirikae(); }   //右辺
 if( xza[i]<marg_l[i]){ hen=1;
   stx[i]=-stx[i]; xza[i]=marg_l[i]; kirikae(); }                      //左辺
 if(yza[i]>marg_t[i]+disp_h[i]-img_h[i]){ hen=2;
   sty[i]=-sty[i]; yza[i]=marg_t[i]+disp_h[i]-img_h[i]; kirikae(); }   //下辺
 if(yza[i]<marg_t[i]){ hen=3;
   sty[i]=-sty[i]; yza[i]=marg_t[i]; kirikae(); }                      //上辺

 Disp("dot"+i, off_w+xza[i], off_h+yza[i]) }
 setTimeout("Zahyo()",1000/chg) }

// 初期データ発生
function primX(i){
 stx[i]=(1-Math.random()*2)*ugoku[Gy[i]][4]/6;
 xflg[i]=Math.floor(1+Math.random()*ugoku[Gy[i]][5]) }

function primY(i){
 sty[i]=(1-Math.random()*2)*ugoku[Gy[i]][4]/6;
 yflg[i]=Math.floor(1+Math.random()*ugoku[Gy[i]][5]) }

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

function Size(z){
 disp_w[z]=doc_x-marg_l[z]; disp_h[z]=doc_y-marg_t[z] }

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

// 画像を切り替える
function kirikae(){
if (hsw>0 && i==0){
  if(dpsw>0){ visi="hidden"; dpsw=-1 } else{ visi="visible"; dpsw=1 }
  for(k=1; k<no; k++){ document.getElementById("dot"+k).style.visibility=visi } }; 
 Gp[i]++; if(Gp[i]>Gx[i]){ Gp[i]=6 }
 document.getElementById("img"+i).src=ugoku[Gy[i]][Gp[i]];
img_bh=img_h[i]; img_bw=img_w[i]
 img_h[i]=document.getElementById("img"+i).height;
 img_w[i]=document.getElementById("img"+i).width;
 if(hen==0){ xza[i]+=img_bw-img_w[i] }
 if(hen==2){ yza[i]+=img_bh-img_h[i] } }

// -->
</script>