演示地址: 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 ' ; 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
id
="screen"
></
div
>
<
div
id
="bankImages"
>
<
img
alt
=""
src
="https://p-blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_14.jpg"
>
<
img
alt
=""
src
="https://p-blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_3.jpg"
>
<
img
alt
=""
src
="https://p-blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_16.png"
>
<
img
alt
=""
src
="https://p-blog.csdn.net/images/p_blog_csdn_net/WanTianwen/382001/o_8.jpg"
>
<
img
alt
=""
src
="https://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
>