足球游戏_中国足彩网¥体育资讯$

js由下向上不断上升冒气泡效果实例
来源:易贤网 阅读:945 次 日期:2015-05-11 14:36:05
温馨提示:易贤网小编为您整理了“js由下向上不断上升冒气泡效果实例”,方便广大网友查阅!

这篇文章主要介绍了js由下向上不断上升冒气泡效果,实例分析了javascript操作鼠标事件、图片及样式的相关技巧,需要的朋友可以参考下

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

<img src="">

<img src="">

<img src="">

</div>

</body>

</html>

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

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看脚本栏目
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标