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


Posted in Javascript onMay 07, 2015

本文实例讲述了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="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>

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

Javascript 相关文章推荐
JS重要知识点小结
Nov 06 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
Nuxt使用Vuex的方法示例
Sep 06 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 #Javascript
js显示文本框提示文字的方法
May 07 #Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 #Javascript
浅谈document.write()输出样式
May 07 #Javascript
js库Modernizr的介绍和使用
May 07 #Javascript
详谈LABJS按需动态加载js文件
May 07 #Javascript
JavaScript改变CSS样式的方法汇总
May 07 #Javascript
You might like
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP _construct()函数讲解
2019/02/03 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
Python单元测试实例详解
2018/05/25 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python单例模式的多种实现方法
2019/07/26 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
在python中求分布函数相关的包实例
2020/04/15 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
创业计划书的内容步骤和要领
2014/01/04 职场文书
小学运动会表扬稿
2014/01/19 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书