js由下向上不断上升冒气泡效果实例
本文实例讲述了js由下向上不断上升冒气泡效果的方法。分享给大家供大家参考。具体实现方法如下：
<html>
<head>
<title>JS实现气泡从水中急速上升效果</title>
<styletype="text/css">
body{
cursor:crosshair;margin:0;padding:0;
position:absolute;overflow:hidden;
background:#FFF;left:0;top:0;
width:100%;height:100%;
}
</style>
<scripttype="text/javascript">
varobject=newArray();
nbfm=60;
varxm=0;
varym=9999;
varnx=0;
varny=0;
functionmovbulb(){
with(this){
if(ec<20){
if(Math.abs(x0-xm)<100&&Math.abs(y0-ym)<100){
xx=(xm-x0)/8;
yy=(ym-y0)/8;
ec++;
}
}
xx*=0.99;
yy*=0.99;
x0=Math.round(x0+Math.cos(y0/15)*p)+xx;
y0+=yy-v;
if(y0<-h*2||x0<-w*2||x0>nx+w*2){
y0=ny+N+h*2;
x0=nx/2-100+Math.random()*100;
ec=0;
}
obj.style.top=y0-h;
obj.style.left=x0-w;
}
}
functionCObj(N,img,w,h){
this.obj=document.createElement("img");
this.obj.src=img.src;
this.obj.style.position="absolute";
this.obj.style.left=-1000;
document.body.appendChild(this.obj);
this.N=N;
this.x0=0;
this.y0=-1000;
this.v=1+Math.round((80/h)*Math.random());
this.p=1+Math.round((w/8)*Math.random());
this.xx=0;
this.yy=0;
this.ec=0;
this.w=w;
this.h=h;
this.movbulb=movbulb;
}
functionresize(){
nx=document.body.offsetWidth;
ny=document.body.offsetHeight;
}
onresize=resize;
document.onmousemove=function(e){
if(window.event)e=window.event;
xm=document.body.scrollLeft+(e.x||e.clientX);
ym=document.body.scrollTop+(e.y||e.clientY);
}
functionrun(){
for(iinobject)object[i].movbulb();
setTimeout(run,16);
}
onload=function(){
PIC=document.getElementById("bubbles").getElementsByTagName("img");
resize();
for(nbf=0;nbf<nbfm;nbf++){
sf=PIC[nbf%PIC.length];
object[nbf]=newCObj(nbf,sf,sf.width/2,sf.height/2);
}
run();
}
</script>
</head>
<body>
<divid="bubbles"style="visibility:hidden">
<imgsrc="http://bbs.blueidea.com/static/image/smiley/blueidea/smile.gif">
<imgsrc="http://bbs.blueidea.com/static/image/smiley/blueidea/biggrin.gif">
<imgsrc="http://bbs.blueidea.com/static/image/smiley/blueidea/eek.gif">
<imgsrc="http://bbs.blueidea.com/static/image/smiley/blueidea/rolleyes.gif">
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。