◇１．画像の数を変える
１行目の「msOpMax=4;// マウスストーカーの数」の数値を変えると画像の数が変わります。
◇２．オプションの間隔を変える
間隔を変えるにはマウスの履歴の数をかえます。２行目の「msOpHis=100;// マウスの軌跡を覚える数」の数値を大きくすれば間隔が広く、小さくすれば間隔が狭くなります。
◇３．プログラムリスト(msoption.js)
msOpMax=4;// マウスストーカーの数
msOpHis=100;// マウスの軌跡を覚える数
msOMx=new Array(msOpHis);// マウスの軌跡の座標
msOMy=new Array(msOpHis);
msOr=new Array(msOpMax);// 履歴の何番目を読むかの変数
msOw=0;// マウスの軌跡を書き込む位置
msOstart=true;// 初めて実行したかのフラグ
var bw=0;// ブラウザチェック
if(document.getElementById){bw=1;}// ネスケ６〜 IE５〜なら真
if((document.all)&&(bw==1)){bw=2;}// IE４〜なら真
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='option.gif' style='position:absolute;left:-200px;' name='msop"+i+"'>");
}
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]];// 読み出す位置からマウス移動履歴を取得
my=msOMy[msOr[i]];
msOr[i]++;// 読み出し位置をずらす
if(msOr[i]>=msOpHis){msOr[i]=0;}// 最後まで読んだら始めに戻す
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;
}
}
|
|
