7顶

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

稿源：互联网 2022-04-02 21:38:20 点击： 11475 撤稿纠错

利用JS来实现气泡从下自上急速上升冒泡的特效代码

以下讨论的是和冒气泡相关的由下自上不断上升冒气泡的js特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

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

关于由下自上不断上升冒气泡的js特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011110775943.shtml方便下次再访问哦。

·上一篇： 一例动态效果显示的人物结构的关系图的文字特效
·下一篇： 一个简单的js投票柱状百分比特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

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

文章分类LIST >>返回首页

最新游戏

最新新闻