【酷】JS+CSS打造沿Y轴纵深运动的3D球体

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>【酷】JS+CSS打造沿Y轴纵深运动的3D球体</title>
<style type="text/css">
	html {
		overflow: hidden;
	}
	body {
		margin: 0px;
		padding: 0px;
		background: #111;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	#screen {
		position:absolute;
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
		background: #000;
		overflow: hidden;
		cursor: pointer;
	}
	#screen img {
		position: absolute;
	}
	#vb {
		position: absolute;
		border-left: #666 solid 1px;
		left: 50%;
		top: 10%;
		height: 80%;
		z-index: 1000;
	}
	#title {
		position: absolute;
		color: #fff;
		font-family: arial;
		font-weight: bold;
		font-size: 1.5em;
		text-align: center;
		width: 100%;
		bottom: 1em;
	}
</style>

<script type="text/javascript">
r3d = {
	spd  : .03,
	max  : 160,
	O    : [],
	num  : 0,
	down : false,
	xm   : 0,
	ym   : 0,
	xb   : 0,
	yb   : 0,
	scr  : 0,
	R    : 0,
	N    : 0,
	Im   : 0,
	img  : 0,
	nx   : 0,
	ny   : 0,
	nw   : 0,

	init : function ()
	{
		this.scr = document.getElementById('screen');
		this.img = document.getElementById('particles').getElementsByTagName('img');
		this.scr.onselectstart = function () { return false; }
		this.scr.ondrag        = function () { return false; }
		this.scr.onmousemove   = function (e)
		{
			if (r3d.down)
			{
				if (window.event) e = window.event;
				var xm = e.clientX - r3d.nx;
				var ym = e.clientY - r3d.ny;
				if (Math.abs(xm - r3d.xb) + Math.abs(ym - r3d.yb) > r3d.img[r3d.Im % r3d.img.length].width)
				{
					var o;
					if (r3d.N < r3d.max)
					{
						o = document.createElement('img');
						r3d.scr.appendChild(o);
						r3d.O[r3d.N % r3d.max] = o;
					}
					else o = r3d.O[r3d.N % r3d.max];
					var i = r3d.img[r3d.Im % r3d.img.length];
					if (xm < r3d.nw)
					{
						o.X = r3d.nw - xm;
						o.c = -r3d.R - Math.PI / 2;
					} else {
						o.X =  xm - r3d.nw;
						o.c = -r3d.R + Math.PI / 2;
					}
					o.src = i.src;
					o.w = Math.round(i.width / 2);
					o.style.top = Math.round(ym - o.height / 2) + 'px';
					o.style.left = "-9999px";
					r3d.N++;
					r3d.xb = xm;
					r3d.yb = ym;
				}
			}
			return false;
		}
		this.scr.onmousedown = function (e)
		{
			r3d.down = true;
			r3d.xb = r3d.yb = -999;
			return false;
		}
		this.scr.onmouseup   = function (e)
		{
			r3d.down = false;
			r3d.Im++;
			if(r3d.N > 10) document.getElementById('title').innerHTML = "";
			return false;
		}
		r3d.resize();
		r3d.run();
	},

	resize : function () {
		var o = r3d.scr;
		r3d.nw = o.offsetWidth / 2;
		for (r3d.nx = 0, r3d.ny = 0; o != null; o = o.offsetParent)
		{
			r3d.nx += o.offsetLeft;
			r3d.ny += o.offsetTop;
		}
	},

	run : function ()
	{
	    r3d.R += r3d.spd;
		for (var i = 0, o; o = r3d.O[i]; i++)
		{
			o.style.left = Math.round(r3d.nw + o.X * Math.sin(r3d.R + o.c) - o.w * .5) + 'px';
			o.style.zIndex = 1000 + Math.round(2 * o.w + (Math.abs(o.X) * Math.cos(r3d.R + o.c)));
		}
		setTimeout(r3d.run, 32);
	}

}

onload = function()
{
	onresize = r3d.resize;
	r3d.init();
}
</script>
</head>
<body>
<div id="screen">
<div id="title">点击或者在屏幕上画线，就看到效果了</div>
<div id="vb"></div>
</div>
<div id="particles" style="visibility:hidden">
	<img alt="" src="/images/20110926/mb1.gif">
	<img alt="" src="/images/20110926/mb2.gif">
	<img alt="" src="/images/20110926/mb3.gif">
	<img alt="" src="/images/20110926/mb4.gif">
</div>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>