js实现小鱼吐泡泡在页面游动特效
时间：2008-09-22
来源：互联网
非常逼真的用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.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=\"http://img.jb51.net/images/fish/fish\"+i+\".gif\";
}
function PreLoad(){
for(i=0; i < Pics.length; i++){
Load=new Image();
Load.src=Pics;
}
}
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=Math.random()*H2-50;
Xpos=-50;
Speed=Math.random()*10+1;
Cstep=0;
Step=Math.random()*0.1+0.05;
Grow=4;
NsSize=Math.random()*4+6;
Rate=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+\" height=\"+NsSize+\"></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*Math.sin(270*Math.PI/180);
sx = Speed*Math.cos(Cstep*5);
Ypos+=sy;
Xpos+=sx;
if (Ypos < -40){
if (Ns) {Ypos=document.nfish.top;Xpos=document.nfish.left}
else {Ypos=ifish.style.pixelTop;Xpos=ifish.style.pixelLeft}
Speed= 6+Math.random()*3;
Grow=4;
NsSize=Math.random()*4+6;
}
if (Ns){
document.layers['sn'+i].left=Xpos+Ws;
document.layers['sn'+i].top=Ypos+Hs;
}
else{
si.style.pixelLeft=Xpos+Ws;
si.style.pixelTop=Ypos+Hs;
si.style.width=Grow;
si.style.height=Grow;
}
Grow+=Rate;
Cstep+=Step;
if (Grow > 15) Grow=16;
}
setTimeout('Bubbles()',10);
}
function Start(){
AniFish();
MoveFish();
Bubbles();
}
//-->
</script>
</body>
</html>
<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.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=\"http://img.jb51.net/images/fish/fish\"+i+\".gif\";
}
function PreLoad(){
for(i=0; i < Pics.length; i++){
Load=new Image();
Load.src=Pics;
}
}
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=Math.random()*H2-50;
Xpos=-50;
Speed=Math.random()*10+1;
Cstep=0;
Step=Math.random()*0.1+0.05;
Grow=4;
NsSize=Math.random()*4+6;
Rate=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+\" height=\"+NsSize+\"></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*Math.sin(270*Math.PI/180);
sx = Speed*Math.cos(Cstep*5);
Ypos+=sy;
Xpos+=sx;
if (Ypos < -40){
if (Ns) {Ypos=document.nfish.top;Xpos=document.nfish.left}
else {Ypos=ifish.style.pixelTop;Xpos=ifish.style.pixelLeft}
Speed= 6+Math.random()*3;
Grow=4;
NsSize=Math.random()*4+6;
}
if (Ns){
document.layers['sn'+i].left=Xpos+Ws;
document.layers['sn'+i].top=Ypos+Hs;
}
else{
si.style.pixelLeft=Xpos+Ws;
si.style.pixelTop=Ypos+Hs;
si.style.width=Grow;
si.style.height=Grow;
}
Grow+=Rate;
Cstep+=Step;
if (Grow > 15) Grow=16;
}
setTimeout('Bubbles()',10);
}
function Start(){
AniFish();
MoveFish();
Bubbles();
}
//-->
</script>
</body>
</html>
作者: 淡水 发布时间: 2008-09-22
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
