JS實現氣泡從水中急速上升效果_計算轉換特效

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 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="/jscss/demoimg/200908/b3.gif">
	<img src="/jscss/demoimg/200908/b4.gif">
	<img src="/jscss/demoimg/200908/b5.gif">
	<img src="/jscss/demoimg/200908/b6.gif">
</div>
</body>
</html>

所屬頻道：計算轉換特效/更新時間：2012-05-08

[收藏][報錯][返回列表]

相關計算轉換特效：

JS實現氣泡從水中急速上升效果_計算轉換特效

計算轉換特效Rss訂閱特效代碼搜索

計算轉換特效推薦

猜你也喜歡看這些