<!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 () { returnfalse; }
this.screen.obj.ondrag =function () { returnfalse; }
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;
returnfalse;
}
</script>
</head>
<body>
<div id="screen"></div>
<div id="bankImages">
<img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_14.jpg">
<img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_3.jpg">
<img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_16.png">
<img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_8.jpg">
<img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_1.bmp">
<img alt="" src="http://cache33.51.com/photo2/e6/78/wantianwen/e202d467c6ba813545582b56f04c2a1d.jpg">
<img alt="" src="http://cache33.51.com/photo2/e6/78/wantianwen/74c3e07acebb6f854c7e9a221177edd5.jpg">
<img alt="" src="http://cache33.51.com/photo2/e6/78/wantianwen/4949b3aaef68c61cc8779413e0c0e477.jpg">
<img alt="" src="http://images10.51.com/b/200610/e6/78/wantianwen/e6170b2c57f87d02692be0e611034813.jpg">
<img alt="" src="http://cache33.51.com/photo2/e6/78/wantianwen/6a06a243639859776453c64a95f7b686.jpg">
<img alt="" src="http://cache45.51.com/photo5/e6/78/wantianwen/098ca589bb50843df84318baa649191a.jpg">
<img alt="" src="http://cache45.51.com/photo5/e6/78/wantianwen/8a935979e6f3d757ed4c5020ed3155aa.jpg">
<img alt="" src="http://cache45.51.com/photo5/e6/78/wantianwen/006e96a581ccd4f1d52f4cceb803f622.jpg">
<img alt="" src="http://cache33.51.com/photo2/e6/78/wantianwen/9066f5ceb52a3d9eba534c001c8fc62a.jpg">
<img alt="" src="http://cache33.51.com/photo2/e6/78/wantianwen/f5ed5b422236332ef28c5fe36e0e61f3.jpg">
<img alt="" src="http://cache18.51.com/photo/e6/78/wantianwen/1150462594548.jpg">
<img alt="" src="http://cache18.51.com/photo/e6/78/wantianwen/1150461892572.jpg">
</div>
<script type="text/javascript">
onresize = tv.resize;
tv.init();
</script>
</body>
</html>