Zeer leuk en interactieve rondzwemmende vis
Plaats onderstaand script tussen de <body> tags van je pagina <script language="JavaScript"> how_many_bubbles=5; pics=new Array(); load=new Array(); for(i=0; i <= 6; i++){ pics[i]=i+".gif"; } for(i=0; i < pics.length; i++){ load[i]=new Image(); load[i].src=pics[i]; } bub_image=new Image(); bub_image.src="bubble.gif"; ns=(document.layers)?1:0; strt=0-(load[0].width+50); ypos=new Array(); xpos=new Array(); speed=new Array(); rate=new Array(); grow=new Array(); step=new Array(); cstep=new Array(); ns_size=new Array(); pos=-1; jog=1; timer=null; sd=0; h=0; w=0; sy=0; sx=0; inih=(ns)?window.innerHeight:window.document.body.clientHeight; for (i=0; i < how_many_bubbles; i++){ ypos[i]=Math.random()*inih-50; xpos[i]=-50; speed[i]=Math.random()*10+1; cstep[i]=0; step[i]=Math.random()*0.1+0.05; grow[i]=4; ns_size[i]=Math.random()*4+6; rate[i]=Math.random()*0.5+0.1; } if (ns){ for (i=0; i < how_many_bubbles; i++){ document.write("<layer name='bubs"+i+"' left=0 top=-50>" +"<img src="+bub_image.src+" width="+ns_size[i]+" height="+ns_size[i]+"></layer>"); } document.write("<layer name='fish' left=0 top=-50><img src='0.gif' name='frame'></layer>"); } else{ document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < how_many_bubbles; i++){ document.write('<img id="bubs'+i+'" src="'+bub_image.src+'" style="position:absolute;top:-50px;left:0px">'); } document.write('</div></div>'); document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">' +'<img id="fish" src="0.gif" name="frame" style="position:absolute;top:-100px;left:0px"></div></div>'); } function AniFish(){ pos+=jog; if (pos >= pics.length) pos=0; if (ns) document.fish.document.images.frame.src=pics[pos]; else document.images.frame.src=pics[pos]; } function MoveFish(){ h=(ns)?window.innerHeight:window.document.body.clientHeight; w=(ns)?window.innerWidth:window.document.body.clientWidth; sy=(ns)?window.pageYOffset:document.body.scrollTop; sx=(ns)?window.pageXOffset:document.body.scrollLeft; strt-=2; sd=h-(load[0].height+10); if (strt < 0-(load[0].width)) strt=w; if (ns){ document.fish.left=strt+sx; document.fish.top=sd+sy; } else{ fish.style.left=strt+sx; fish.style.top=sd+sy; } AniFish(); setTimeout('MoveFish()',50) } function Bubbles(){ for (i=0; i < how_many_bubbles; i++){ dy = speed[i]*Math.sin(270*Math.PI/180); dx = speed[i]*Math.cos(cstep[i]*5); ypos[i]+=dy; xpos[i]+=dx; ey=sd; ex=strt; if (ypos[i] < -40){ ypos[i]=ey; xpos[i]=ex; speed[i]= 6+Math.random()*3; grow[i]=4; ns_size[i]=Math.random()*4+6; } if (ns){ document.layers['bubs'+i].top=ypos[i]+sy; document.layers['bubs'+i].left=xpos[i]+sx; } else{ document.all['bubs'+i].style.top=ypos[i]+sy; document.all['bubs'+i].style.left=xpos[i]+sx; document.all['bubs'+i].style.width=grow[i]; document.all['bubs'+i].style.height=grow[i]; } grow[i]+=rate[i]; cstep[i]+=step[i]; if (grow[i] > 15) grow[i]=16; } setTimeout('Bubbles()',10); } function Start(){ MoveFish(); Bubbles(); } if (document.all||ns){ setTimeout('Start()',2000); } //--> </script>
Klik hier om de zipfile met de benodigde gifjes te downloaden