由下自上不断上升冒气泡的js特效代码-JS特效-爱易网页

由下自上不断上升冒气泡的js特效代码

日期：2014-05-18　浏览次数：20147 次

以下是程序代码

<html>
<head>
<title>JS实现气泡从水中急速上升效果</title>
<style type="text/css">
body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#FFF; left:0; top:0; width:100%; height:100%;}
</style>
<script type="text/javascript">
var object = new Array();
nbfm   = 60;
var xm = 0;
var ym = 9999;
var nx = 0;
var ny = 0;

function movbulb(){
 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;
 }
}

function run(){
 for(i in object)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] = new CObj(nbf,sf,sf.width/2,sf.height/2);
 }
 run();
}

</script>
</head>
<body>
<div id="bubbles" style="visibility:hidden">
 <img src="http://bbs.blueidea.com/static/image/smiley/blueidea/smile.gif">
 <img src="http://bbs.blueidea.com/static/image/smiley/blueidea/biggrin.gif">
 <img src="http://bbs.blueidea.com/static/image/smiley/blueidea/eek.gif">
 <img src="http://bbs.blueidea.com/static/image/smiley/blueidea/rolleyes.gif">
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

由下自上不断上升冒气泡的js特效代码

相关资料更多>

推荐阅读更多>