..



 ■HomeJavaScriptサンプル集〔インタラクティブ編〕動画でHPを装飾(さくら)−プログラムの解説

+1JavaScript 無料のフリースクリプト集...
桜が舞う
さくら

 さくらの花びらが画面いっぱいに舞い散ります。春の壁紙と合わせて効果を出してみませんか?



 プログラムの解説
プログラムリスト(sakura.js)

 しゃぼんだまからの変更点を赤字で表示しています。

imMaxCh=20;// 最大画像数
imX=new Array(imMaxCh);// 画像の座標
imY=new Array(imMaxCh);
imZ=new Array(imMaxCh);// X軸方向へのの加速度
imW=new Array(imMaxCh);// 加速度への加算減算フラグ
imH=new Array(imMaxCh);// Y軸方向への加速度
imMz=8;// 振幅の大きさ
imA=0;
var imWx;
var imWy;// ウインドウの幅と高さ
bw=0;// ブラウザチェック

for(var i=0;i<imMaxCh;i++)
{
   var j=Math.round(Math.random())+1
   document.write("<img src='sakura"+j+".gif' style='position:absolute;left:-200px;' name='imch"+i+"'>");
}
imgInit();
function imgInit()// 初期設定
{
  if(document.getElementById){bw=1;}// ネスケ6〜 IE5〜なら真
  if((document.all)&&(bw==1)){bw=2;}// IE4〜なら真
  if(bw==0)
   {
      alert("ブラウザバージョンが対応していません\n最新のブラウザに更新してください\n推奨バージョン(NN6〜,IE5〜)\n    +1JavaScript");
      return;
   }
   imMxSet();
   for(var i=0;i<imMaxCh;i++)// 画像の変数の初期設定
   {
      imX[i]=Math.floor(Math.random()*imWx);
      imY[i]=Math.floor(Math.random()*imWy);
      imZ[i]=Math.floor(Math.random()*(imMz-1)*2)-(imMz-1);
      if(Math.random()<0.5){imW[i]=1;}else{imW[i]=-1;}
      imH[i]=Math.floor(Math.random()*4)+1;
   }
   imMain();
}
function imMxSet()// ウインドウをリサイズした時にウインドウの幅と高さを取得
{
   if(bw==1)// ネスケの場合
   {
      imWx=window.innerWidth+window.pageXOffset-15;
      imWy=window.innerHeight+window.pageYOffset;
   }
   if(bw==2)// IEの場合
   {
      imWx=window.document.body.clientWidth+document.body.scrollLeft;
      imWy=window.document.body.clientHeight+document.body.scrollTop;
   }
}




function imMain()// メインルーチン
{
   var x,y;
   imMxSet();
   for(var i=0;i<imMaxCh;i++)
   {
      imX[i]+=imZ[i];
      imA++;
      if(imA==3)
      {
         imA=0;
         imZ[i]+=imW[i];
         if(imZ[i]>imMz+2){imW[i]=-imW[i];}
         if(imZ[i]<-imMz){imW[i]=-imW[i];}
      }
      imY[i]+=imH[i];
      if(imY[i]>imWy)// 画面から消えたら上に戻す
      {
         imX[i]=Math.floor(Math.random()*imWx);
         imY[i]=-document.images["imch"+i].height;
         imH[i]=Math.floor(Math.random()*4)+1;
         if(Math.random()>0.8){imH[i]=16;}// たまに早く落ちる花びらを作る
      }
      x=imX[i];
      y=imY[i];
      if(x>imWx-document.images["imch"+i].width){x=-100;}
      if(y>imWy-document.images["imch"+i].height){y=-100;}
      document.images["imch"+i].style.left=x;// 画像の座標の変更
      document.images["imch"+i].style.top=y;
   }
   if(bw==2){setTimeout("imMain()",50);}else{setTimeout("imMain()",40);}// 割込処理
}


..


..