<!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>
html