3D圖片相冊效果

2009-06-04　來源/作者：懶人圖庫　分類：圖片特效　 «»

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	html {
		overflow: hidden;
	}
	body {
		position: absolute;
		margin: 0px;
		padding: 0px;
		background: #111;
		width: 100%;
		height: 100%;
	}
	#screen {
		position: absolute;
		left: 10%;
		top: 10%;
		width: 80%;
		height: 80%;
		background: #000;
	}
	#screen img {
		position: absolute;
		cursor: pointer;
		visibility: hidden;
		width: 0px;
		height: 0px;
	}
	#screen .tvover {
		border: solid #876;
		opacity: 1;
		filter: alpha(opacity=100);
	}
	#screen .tvout {
		border: solid #fff;
		opacity: 0.7;
	}
	#bankImages {
		display: none;
	}
</style>
<script type="text/javascript">
var Library = {};
Library.ease = function () {
	this.target = 0;
	this.position = 0;
	this.move = function (target, speed)
	{
		this.position += (target - this.position) * speed;
	}
}
var tv = {
	O : [],
	screen : {},
	grid : {
		size       : 4,  
		borderSize : 6,  
		zoomed     : false
	},
	angle : {
		x : new Library.ease(),
		y : new Library.ease()
	},
	camera : {
		x    : new Library.ease(),
		y    : new Library.ease(),
		zoom : new Library.ease(),
		focalLength : 750 
	},
	init : function ()
	{
		this.screen.obj = document.getElementById('screen');
		var img = document.getElementById('bankImages').getElementsByTagName('img');
		this.screen.obj.onselectstart = function () { return false; }
		this.screen.obj.ondrag        = function () { return false; }
		var ni = 0;
		var n = (tv.grid.size / 2) - .5;
		for (var y = -n; y <= n; y++)
		{
			for (var x = -n; x <= n; x++)
			{
				var o = document.createElement('img');
				var i = img[(ni++) % img.length];
				o.className = 'tvout';
				o.src = i.src;
				tv.screen.obj.appendChild(o);
				o.point3D = {
					x  : x,
					y  : y,
					z  : new Library.ease()
				};
				o.point2D = {};
				o.ratioImage = 1;
				tv.O.push(o);
				o.onmouseover = function ()
				{
					if (!tv.grid.zoomed)
					{
						if (tv.o)
						{
							tv.o.point3D.z.target = 0;
							tv.o.className = 'tvout';
						}
						this.className = 'tvover';
						this.point3D.z.target = -.5;
						tv.o = this;
					}
				}
				o.onclick = function ()
				{
					if (!tv.grid.zoomed)
					{
						tv.camera.x.target = this.point3D.x;
						tv.camera.y.target = this.point3D.y;
						tv.camera.zoom.target = tv.screen.w * 1.25;
						tv.grid.zoomed = this;
					} else {
						if (this == tv.grid.zoomed){
							tv.camera.x.target = 0;
							tv.camera.y.target = 0;
							tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
							tv.grid.zoomed = false;
						}
					}
				}
				o.calc = function ()
				{
					this.point3D.z.move(this.point3D.z.target, .5);
					var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
					var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
					var z = this.point3D.z.position * tv.camera.zoom.position;
					var xy = tv.angle.cx * y  - tv.angle.sx * z;
					var xz = tv.angle.sx * y  + tv.angle.cx * z;
					var yz = tv.angle.cy * xz - tv.angle.sy * x;
					var yx = tv.angle.sy * xz + tv.angle.cy * x;
					this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
					this.point2D.x = yx * this.point2D.scale;
					this.point2D.y = xy * this.point2D.scale;
					this.point2D.w = Math.round(
					                   Math.max(
					                     0,
					                     this.point2D.scale * tv.camera.zoom.position * .8
					                   )
					                 );
					if (this.ratioImage > 1)
						this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
					else
					{
						this.point2D.h = this.point2D.w;
						this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
					}
				}
				o.draw = function ()
				{
					if (this.complete)
					{
						if (!this.loaded)
						{
							if (!this.img)
							{
								this.img = new Image();
								this.img.src = this.src;
							}
							if (this.img.complete)
							{
								this.style.visibility = 'visible';
								this.ratioImage = this.img.width / this.img.height;
								this.loaded = true;
								this.img = false;
							}
						}
						this.style.left = Math.round(
						                    this.point2D.x * this.point2D.scale +
						                    tv.screen.w - this.point2D.w * .5
						                  ) + 'px';
						this.style.top  = Math.round(
						                    this.point2D.y * this.point2D.scale +
						                    tv.screen.h - this.point2D.h * .5
						                  ) + 'px';
						this.style.width  = this.point2D.w + 'px';
						this.style.height = this.point2D.h + 'px';
						this.style.borderWidth = Math.round(
						                           Math.max(
						                             this.point2D.w,
						                             this.point2D.h
						                           ) * tv.grid.borderSize * .01
						                         ) + 'px';
						this.style.zIndex = Math.floor(this.point2D.scale * 100);
					}
				}
			}
		}
		tv.resize();
		mouse.y = tv.screen.y + tv.screen.h;
		mouse.x = tv.screen.x + tv.screen.w;
		tv.run();
	},
	resize : function ()
	{
		var o = tv.screen.obj;
		tv.screen.w = o.offsetWidth / 2;
		tv.screen.h = o.offsetHeight / 2;
		tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
		for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)
		{
			tv.screen.x += o.offsetLeft;
			tv.screen.y += o.offsetTop;
		}
	},
	run : function ()
	{
		tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
		tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
		tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
		tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
		tv.camera.zoom.move(tv.camera.zoom.target, .05);
		tv.angle.cx = Math.cos(tv.angle.x.position);
		tv.angle.sx = Math.sin(tv.angle.x.position);
		tv.angle.cy = Math.cos(tv.angle.y.position);
		tv.angle.sy = Math.sin(tv.angle.y.position);
		for (var i = 0, o; o = tv.O[i]; i++)
		{
			o.calc();
			o.draw();
		}
		setTimeout(tv.run, 32);
	}
}
var mouse = {
	x : 0,
	y : 0
}
document.onmousemove = function(e)
{
	if (window.event) e = window.event;
	mouse.x = e.clientX;
	mouse.y = e.clientY;
	return false;
}
</script>
</head>
<body>
<div   class="2ee0oe0"   id="screen"></div>
<div   class="myii2yu"   id="bankImages">
	<img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif">
	<img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif">
	<img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif">
	<img alt="" src="http://www.cssrain.cn/skins/tim/logo-jq.gif">
	<img alt="" src="http://www.cssrain.cn/skins/tim/logo-jq.gif">
	<img alt="" src="http://www.cssrain.cn/skins/tim/logo-jq.gif">
	<img alt="" src="http://www.cssrain.cn/demo/JQuery+API/logo-json.gif">
	<img alt="" src="http://www.cssrain.cn/demo/JQuery+API/logo-json.gif">
	<img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif">
	<img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif">
	<img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif">
	<img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif">
	<img alt="" src="http://www.cssrain.cn/demo/JQuery+API/logo-json.gif">
	<img alt="" src="http://www.cssrain.cn/demo/JQuery+API/logo-json.gif">
	<img alt="" src="http://www.cssrain.cn/demo/JQuery+API/logo-json.gif">
	<img alt="" src="http://www.cssrain.cn/demo/JQuery+API/logo-json.gif">
</div>
<script type="text/javascript">
	onresize = tv.resize;
	tv.init();
</script>
</body>
</html>

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

很有空間感的圖片特效

標簽：圖片特效