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程序设计有所帮助。