こうもり

[概要]
マウスカーソルのまわりをこうもりが飛ぶ。

[参照]
Kurt's DHTMLより

　sample

　source

<HTML>
<HEAD>
<TITLE>こうもり</TITLE>
<script language="JavaScript">
<!--
//original script by kurt.grigg@virgin.net
//modify by ヨッシーの”ホームページを作ろう！”
//    "http://homepage2.nifty.com/yoshi-m/makehp/"

/*----------初期設定----------*/
amount=5;                     //飛んでいる物の数（３匹以上） !!
//アニメーション画像
fly_img1 = "画像のＵＲＬ";         //画像１
fly_img2 = "画像のＵＲＬ";         //画像２

bats=new Array(fly_img1,fly_img2)

//プレロード
function pRe(){
    Img0=new Image();
    Img0.src=fly_img1;
    Img1=new Image();
    Img1.src=fly_img2;
    setTimeout('pRe()',3000)
}
brwsr=(document.layers)?1:0;
if (brwsr){
    window.captureEvents(Event.MOUSEMOVE);
    for (i=0; i < amount; i++){
        document.write("<LAYER NAME=n"+i+" LEFT=0 TOP=-50><IMG SRC='bat1.gif' NAME='nsi'></LAYER>");
    }
}
else{
    document.write('<div id="ie" style="position:absolute;top:0;left:0"><div style="position:relative">');
    for (i=0; i < amount; i++){
        document.write('<img name="msieBats" src="bat1.gif" style="position:absolute;top:-50;left:0">')
    }
    document.write('</div></div>');
}
Xpos=0;
Ypos=-50;
yBase=0;
xBase=0;
step=0.5;
currStep=0;
a_count=0;
b_count=1;
c_count=2;
move=1;
if (brwsr){
    function NsMouseFollow(evnt){
        Xpos = evnt.pageX;
        Ypos = evnt.pageY;
    }
    window.onMouseMove = NsMouseFollow;
}
else{
    function MsieMouseFollow(){
        Xpos = event.x;
        Ypos = event.y;
    }
    document.onmousemove = MsieMouseFollow;
}

/*----------関数----------*/
function Swirl(){
    if (!brwsr)ie.style.top=document.body.scrollTop;
    yBase=(document.layers)?window.innerHeight/3:window.document.body.offsetHeight/3;
    xBase=(document.layers)?window.innerWidth/7:window.document.body.offsetWidth/7;
    for (i=0; i < amount; i++){
        var layer=(document.layers)?document.layers["n"+i]:msieBats[i].style;
        layer.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/20)
        layer.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)
    }
    currStep+=step;
}

function Animate(){
    if (a_count == bats.length) a_count=0;
    if (b_count == bats.length) b_count=0;
    if (c_count == bats.length) c_count=0;
    if (brwsr){
        document.layers['n'+0].document.images['nsi'].src=bats[a_count];
        document.layers['n'+1].document.images['nsi'].src=bats[b_count];
        document.layers['n'+2].document.images['nsi'].src=bats[c_count];
    }
    else{
        msieBats[0].src=bats[a_count];
        msieBats[1].src=bats[b_count];
        msieBats[2].src=bats[c_count];
    }
    if (amount > 2){
        for (i=3; i < amount; i++){
            if (brwsr){
                document.layers['n'+i].document.images['nsi'].src=bats[b_count];
            }
            else{
                msieBats[i].src=bats[b_count];
            }
        }
        a_count+=move;
        b_count+=move;
        c_count+=move;
        Swirl();
        setTimeout('Animate()',50)
    }
}
//-->
</script>
</HEAD>
<BODY bgcolor=black onLoad="pRe();Animate()">
</BODY>
</HTML>

※画像（もちろん他の画像を使っても良い）
　
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。

　戻る