..



 ■HomeJavaScriptサンプル集マウスストーカーひよこの行進マウスストーカー−プログラムの解説

+1JavaScript 無料のフリースクリプト集...
ひよこの行進マウスストーカー
ひよこの行進マウスストーカー

 ひよこが複雑な動きで行進してマウスについてきます。このコードもオプションストーカーを少し改造してつくりました。


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

 オプションストーカーからの変更点を赤字で表示しています。

msOpMax=4;// マウスストーカーの数
msOpHis=200;// マウスの軌跡を覚える数
msOMx=new Array(msOpHis);// マウスの軌跡の座標
msOMy=new Array(msOpHis);
msOr=new Array(msOpMax);// 履歴の何番目を読むかの変数
msOw=0;// マウスの軌跡を書き込む位置
msOstart=true;// 初めて実行したかのフラグ
var bw=0;// ブラウザチェック
if(document.getElementById){bw=1;}// ネスケ6〜 IE5〜なら真
if((document.all)&&(bw==1)){bw=2;}// IE4〜なら真
document.write("<img src='pjs_logo.gif' style='position:absolute;left:0;top:0;' onClick='goHome()'>");
for(var i=0;i<msOpMax;i++)
{
   document.write("<img src='hiyo0.gif' style='position:absolute;left:-200px;' name='msop"+i+"'>");
   document.write("<img src='hiyo1.gif' style='position:absolute;left:-200px;' name='msop"+i+msOpMax+"'>");
}
msOpInit();
function msOpInit()// 初期設定
{
   if(bw==0)
   {
      alert("ブラウザバージョンが対応していません\n最新のブラウザに更新してください\n推奨バージョン(NN6〜,IE5〜)\n    +1JavaScript");
      return;
   }
   for(var i=0;i<msOpMax;i++)// マウスの座標履歴から読む位置を設定
   {
      msOr[i]=Math.floor(msOpHis/(msOpMax+1)*(i+1))-1;// 個数に等間隔に設定
   }
   document.onmousemove=msOpMove;// イベント発生時に実行する関数の設定
}
function goHome()
{
   window.open("http://plusone.jpn.org/javascript/");
}
function msOpMove(e)// マウスが動くとここが実行されます
{
   var mx,my,msWx,msWy;// ローカル変数の宣言
   if(bw==1)// ブラウザがネスケの場合
   {
      mx=e.pageX;// マウスの座標を取得
      my=e.pageY;
      msWx=window.innerWidth+window.pageXOffset;
      msWy=window.innerHeight+window.pageYOffset;
   }else{// ブラウザがIEの場合
      mx=document.body.scrollLeft+event.clientX;// マウスの座標を取得
      my=document.body.scrollTop+event.clientY;
      msWx=window.document.body.clientWidth+document.body.scrollLeft;
      msWy=window.document.body.clientHeight+document.body.scrollTop;
   }
   msOMx[msOw]=mx;// マウスの座標を履歴に書き込み
   msOMy[msOw]=my;
   msOw++;// 書き込む位置の設定
   if(msOw>=msOpHis){msOw=0;}
   if(msOstart==true)// 初めて実行された時にストーカーの座標を初期化
   {
      for(var i=0;i<msOpHis;i++)
      {
         msOMx[i]=mx;
         msOMy[i]=my;
      }
      msOstart=false;
   }
   for(var i=0;i<msOpMax;i++)// ストーカーの移動
   {
      mx=msOMx[msOr[i]]+i*32;// 読み出す位置からマウス移動履歴を取得
      my=msOMy[msOr[i]];
      msOr[i]++;// 読み出し位置をずらす
      if(msOr[i]>=msOpHis){msOr[i]=0;}// 最後まで読んだら始めに戻す
      if(mx>msOMx[msOr[i]]+i*32)
      {
         if(mx>msWx-document.images["msop"+i].width){mx=-100;}
         if(my>msWy-document.images["msop"+i].height){my=-100;}
         document.images["msop"+i].style.left=mx;// 画像の座標を変更
         document.images["msop"+i].style.top=my;
         document.images["msop"+i+msOpMax].style.left=-100;// 画像の座標を変更
      }else{
         if(mx>msWx-document.images["msop"+i+msOpMax].width){mx=-100;}
         if(my>msWy-document.images["msop"+i+msOpMax].height){my=-100;}
         document.images["msop"+i+msOpMax].style.left=mx;// 画像の座標を変更
         document.images["msop"+i+msOpMax].style.top=my;
         document.images["msop"+i].style.left=-100;// 画像の座標を変更
      }
   }

}


..


..