目次へ
http://www2.ocn.ne.jp/~yoochan/decoration/index.htm
からお借りしました。
html>
<head>
<title>マウス追跡</title>
<style type="text/css"><!--
#obj{ position:absolute; top:-1000; left:0; visibility:hidden }
--></style>
<script language="JavaScript1.2"><!--
/* 以下、"_ie5=(navigator.appName.indexOf('Microsoft Internet Explorer')>=0 && document.getElementById)?true:false;"までの記述を必ず入れて下さい。*/// _bro: 1=NN6+, 2=NN4, 3=IE, 4=Opera, 0=others_bro=(window.opera?4:(document.all?3:(document.getElementById?1:(document.layers?2:0))));// _ie5: true=IE5+_ie5=(navigator.appName.indexOf('Microsoft Internet Explorer')>=0&& document.getElementById)?true:false;
/* このSCRIPT要素内（SCRIPTタグで囲まれている部分）では、下記のスクリプト本体で呼び出される 基本関数の内容を定義します。 スクリプト本体で呼び出される基本関数の定義コードを、基本関数群についてのページからコピーして この部分に貼り付けるか、Sampleのソースを直接ご覧になって、基本関数が定義されている SCRIPT要素部分（SCRIPTタグで囲まれている部分）を、そのまま丸ごとコピーしてお使い下さい。*/
/* このサンプルで使用している基本関数
getDivFromName(nm);moveDivTo(div,left,top);setDivVisibility(div,visible); */
//--></script>
<script language="JavaScript1.2"><!--
/* スクリプト本体部分
var div=null;
active=true; // true: クラゲがマウスカーソルについて移動するstart=true; // true: スライド移動開始 OKfinished=false; // true: 目的地到達/* mouseX, mouseY はカーソルの位置（それぞれ X,Y座標） orgX, orgY は、レイヤ（クラゲ）の初期位置（それぞれ X,Y座標）*/mouseX=orgX=150;mouseY=orgY=150;curX = 0, curY = 0; // active=true の時にカーソルの現在位置（それぞれ X,Y座標）inc = 20; // １アクションごとにスライド移動する距離（単位:px）dist = 0; // マウスカーソルの移動距離（単位:px）/* deltaX, deltaY は、レイヤが静止した時（ただし、ウィンドウ上をクリックしない時）の マウスカーソルからの距離（それぞれ X,Y座標） */deltaX = 10, deltaY = 10;tid=null; // タイマinterval = 40; // タイマインターバル: この値を小さくするとスライド移動のスピードが速くなる。
function mouseMove(e){ // mousemoveイベントハンドラ mouseX=(_bro==4)?e.clientX:(_bro==3)?document.body.scrollLeft+event.clientX:e.pageX;
mouseY=(_bro==4)?e.clientY:(_bro==3)?document.body.scrollTop +event.clientY:e.pageY;
}
function moveSwitch(e) { active=active?false:true; /* mousedownイベントハンドラ */ }
function moveEvent(){
curX=active?mouseX:orgX;
curY=active?mouseY:orgY;
distx=curX-orgX; disty=curY-orgY;
incx=Math.cos(Math.atan2(disty,distx))*inc;
incy=Math.sin(Math.atan2(disty,distx))*inc;
dist=Math.sqrt(Math.pow(distx,2)+Math.pow(disty,2));
/* 40は、クラゲがスライド移動を開始するマウスカーソルの移動距離 マウスカーソルの移動距離が40pxを超えると、クラゲがスライド移動を 開始する。*/ if(!finished&&(dist>inc)||(start&&(dist>40)&&(dist>inc))){
if(start) start=false;
if(finished) finished=false;
orgX+=incx; orgY+=incy;
moveDivTo(div,orgX+deltaX,orgY+deltaY);
}else if(!finished&&(dist<=inc)||(start&&(dist>40)&&(dist<=inc))){
if(!start) start=true;
if(!finished) finished=true;
orgX=curX; orgY=curY;
moveDivTo(div,orgX+deltaX,orgY+deltaY);
setDivVisibility(div,true);
}
tid=setTimeout('moveEvent()',interval);
}
function init(){
div=getDivFromName('obj');
// 以下、documentにmousedownイベントとmousemoveイベントを貼る if (_bro==2) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE);
if(_bro==1){
document.addEventListener('mousedown',moveSwitch,true);
document.addEventListener('mousemove',mouseMove,true);
}else{
document.onmousedown = moveSwitch;
document.onmousemove = mouseMove;
}
moveEvent();
}
function cancel(){
if(tid){ clearTimeout(tid); tid=null; }
}
//--></script>
</head>
<body onLoad="init()" onUnload="cancel()">
<div id="obj"><img src="imege/kame.gif" width="32" height="37"></div>
</body>
</html>