<!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>
原文：http://www.cnblogs.com/kaiwanlin/p/3527254.html
html