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不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
js前端图片加载异常兜底方案
Jun 21 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和ACCESS写聊天室(十)
2006/10/09 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
JavaScript字符串对象
2017/01/14 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
js实现移动端轮播图
2020/12/21 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
对python中return与yield的区别详解
2020/03/12 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
Skyscanner波兰:廉价航班
2017/11/07 全球购物
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
法人授权委托书
2014/09/16 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
股权转让协议书
2014/12/07 职场文书
担保书范本
2015/01/20 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis