JavaScript對象復制，小球滿天飛_計算轉換特效

一個學習JavaScript復制對象的好例子，它會在網頁中復制出多個小球，并隨機漂浮在屏幕上，并跟隨鼠標移動。小球是調用的圖片，試想一下，如果小球的顏色和背景稍有區別，那么本特效用作背景再合適不過了。

<html>
<head>
<title>JavaScript對象復制，小球滿天飛</title>
<style type="text/css">
body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}
img {position:absolute;}
</style>
<script type="text/javascript">
<!--
G1D = new Object();
xm = 0;
ym = 0;
nx = 0;
ny = 0;
k  = Math.PI/180;
M  = 999;
// http://www.zhaotila.cn
document.onmousemove = function(e){
	if (window.event) e = window.event;
	xm = (e.x || e.clientX);
	ym = (e.y || e.clientY);
	M  = 0;
}

function resize() {
	nx = document.body.offsetWidth;
	ny = document.body.offsetHeight;
}
onresize = resize;

G1D.tuf = function(img,xx,yy,g){

this.O = document.createElement("img");
	this.O.src = img.src;
	document.getElementById("ea").appendChild(this.O);

this.xx  = xx;
	this.yy  = yy;
	this.g   = g;
	this.Ox  = -100;
	this.Oy  = 0;
	this.Oxv = 0;
	this.Oyv = 0;
	this.Ozv = 0;
	this.Oi  = Math.round(Math.random() * 100);
}

G1D.tuf.prototype.pof = function() {
	with(this){
		if(M < 256) ex = xm, ey=ym;
		Ox += Oxv;
		Oy += Oyv;
		Oi--;
		Oyv += g;
		if(Oi < 0){
			Ox  = ex;
			Oy  = ey;
			Oi  = 100;
			a   = Math.round(Math.random() * 360);
			Oxv = Math.cos(a * k) * 3;
			Oyv = Math.sin(a * k) * 3;
		}
		O.style.left = Ox - xx;
		O.style.top  = Oy - yy;
	}
}

G1D.fume = function(N,img,px,py,g) {
	this.ux = 0;
	this.uy = 0;
	this.px = px;
	this.py = py;
	this.N  = N;
	this.o  = new Array();
	xx      = img.width/2;
	yy      = img.height/2;
	for(i=0 ; i<N; i++) this.o[i] = new G1D.tuf(img,xx,yy,g);
}

G1D.fume.prototype.po = function(){
	ex = (nx/2) + Math.sin((this.ux+=this.px)*k) * (nx/2.5);
	ey = (ny/2) + Math.cos((this.uy+=this.py)*k) * (ny/2.5);
	for(var i=0;i<this.N;i++)this.o[i].pof();
	M++;
}

function run(){
	zy.po();
	va.po();
	setTimeout(run, 16);
}
onload = function() {
	resize();
	zy = new G1D.fume(50,document.getElementById("cd1"),3,2,-0.1);
	va = new G1D.fume(50,document.getElementById("cd2"),3,2,0.1);
	run();
}

//-->
</script>
</head>

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

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

相關計算轉換特效：

JavaScript對象復制，小球滿天飛_計算轉換特效

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

計算轉換特效推薦

猜你也喜歡看這些