软件开发培训班 >> 编程开发 >> JavaScript

js实现小鱼吐泡泡在页面游动特效

　　本文标签：js,小鱼吐泡泡,页面游动

<html>

<head>

<title>js小鱼吐泡泡在页面游动</title>

</head>

<!--

Image0=new Image();

Image0.src="http://img.jb51.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.jb51.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=setTimeout(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)}

setTimeout(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;

}

setTimeout(Bubbles(),10);

}

function Start(){

AniFish();

MoveFish();

Bubbles();

}

//-->

</script>

</body>

</html>

技术文章快速查找

JSON 客户端和服务器端的格式转换

Web网页对话框可拖动、关闭(自动)文字循环变化

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建