js由下向上不断上升冒气泡效果实例

网络编程 2024/11/14 佚名

3 2 1

本文实例讲述了js由下向上不断上升冒气泡效果的方法。分享给大家供大家参考。具体实现方法如下：

<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="/UploadFiles/2021-04-02/smile.gif">

希望本文所述对大家的javascript程序设计有所帮助。

js,由下向上,冒气泡效果

标签：

js,由下向上,冒气泡效果

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“js由下向上不断上升冒气泡效果实例”

js由下向上不断上升冒气泡效果实例

暂无“js由下向上不断上升冒气泡效果实例”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

js由下向上不断上升冒气泡效果实例

js,由下向上,冒气泡效果

jQuery团购倒计时特效实现方法

jQuery动态效果显示人物结构关系图的方法

评论“js由下向上不断上升冒气泡效果实例”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接