js实现小鱼吐泡泡在页面游动特效
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js小鱼吐泡泡在页面游动</title>
</head>
<body onLoad="Start()">
<script language="JavaScript">
<!--
Image0=new Image();
Image0.src="http://img.phpStudy.net/images/fish/paopao.gif";
Amount=12;
Pics=new Array();
Load=new Array();
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Rate=new Array();
Grow=new Array();
Step=new Array();
Cstep=new Array();
NsSize=new Array();
Ns=(document.layers)?1:0;
Pos=-1;
Jog=1;
Timer=null;
for(i=0; i <= 6; i++){
Pics[i]="http://img.phpStudy.net/images/fish/fish"+i+".gif";
}
function PreLoad(){
for(i=0; i < Pics.length; i++){
Load[i]=new Image();
Load[i].src=Pics[i];
}
}
PreLoad();
Strt=0-(Load[0].width+50);
function AniFish(){
Pos+=Jog;
if (Pos >= Pics.length) Pos=0;
if (Ns) document.nfish.document.images.nframe.src=Pics[Pos];
else document.images.iframe.src=Pics[Pos];
Timer=xywTimeout('AniFish()',50)
}
function MoveFish(){
H=(document.layers)?window.innerHeight+window.pageYOffset:window.document.body.clientHeight+document.body.scrollTop;
W=(document.layers)?window.innerWidth+window.pageXOffset:window.document.body.clientWidth+document.body.scrollLeft;
Strt-=2;
if (Strt < 0-(Load[0].width)) Strt=W;
if (Ns){document.nfish.left=Strt;document.nfish.top=H-(Load[0].height+10)}
else {ifish.style.left=Strt;ifish.style.top=H-(Load[0].height+10)}
xywTimeout('MoveFish()',10)
}
H2=(document.layers)?window.innerHeight:window.document.body.clientHeight;
for (i=0; i < Amount; i++){
Ypos[i]=Math.random()*H2-50;
Xpos[i]=-50;
Speed[i]=Math.random()*10+1;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
Grow[i]=4;
NsSize[i]=Math.random()*4+6;
Rate[i]=Math.random()*0.5+0.1;
}
if (Ns){
for (i = 0; i < Amount; i++){
document.write("<layer name='sn"+i+"' left=0 top=-50><img src="+Image0.src+" name='N' width="+NsSize[i]+" height="+NsSize[i]+"></layer>");
}
document.write("<layer name='nfish' left=0 top=-50><img src='0.gif' name='nframe'></layer>");
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:-100px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'
+'<img id="ifish" src="0.gif" name="iframe" style="position:absolute;top:-100px;left:0px"></div></div>');
}
function Bubbles(){
Hs=(document.layers)?window.pageYOffset:document.body.scrollTop;
Ws=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(270*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]*5);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] < -40){
if (Ns) {Ypos[i]=document.nfish.top;Xpos[i]=document.nfish.left}
else {Ypos[i]=ifish.style.pixelTop;Xpos[i]=ifish.style.pixelLeft}
Speed[i]= 6+Math.random()*3;
Grow[i]=4;
NsSize[i]=Math.random()*4+6;
}
if (Ns){
document.layers['sn'+i].left=Xpos[i]+Ws;
document.layers['sn'+i].top=Ypos[i]+Hs;
}
else{
si[i].style.pixelLeft=Xpos[i]+Ws;
si[i].style.pixelTop=Ypos[i]+Hs;
si[i].style.width=Grow[i];
si[i].style.height=Grow[i];
}
Grow[i]+=Rate[i];
Cstep[i]+=Step[i];
if (Grow[i] > 15) Grow[i]=16;
}
xywTimeout('Bubbles()',10);
}
function Start(){
AniFish();
MoveFish();
Bubbles();
}
//-->
</script>
</body>
</html>
«
»