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 相关文章推荐
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
js全选按钮的实现方法
Nov 17 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 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中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
详解JavaScript中的异常处理方法
2015/06/16 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
深入浅析python继承问题
2016/05/29 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python调用百度语音识别api
2018/08/30 Python
python并发和异步编程实例
2018/11/15 Python
基于python实现KNN分类算法
2020/04/23 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
为什么相对PHP黑python的更少
2020/06/21 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
软件测试有哪些?什么是配置项?
2012/02/12 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
丑小鸭教学反思
2014/02/03 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
比赛主持人开场白
2015/05/29 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
欧元符号 €
2022/02/17 杂记