演示地址：http://www.guowang2008.cn/html/javascript1.html
觉得好的话，一定要给我顶一下。
<!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';