As follows:
The effect code is as follows:
<!doctype html>HTML {overflow:hidden; } body {Position:absolute; margin:0px; padding:0px; Background: #111; Width:100%; Height:100%; } #screen {Position:absolute; Left:10%; Top:10%; Width:90D; Height:90D; 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" >varLibrary = {}; Library.ease=function () { This. target = 0; This. Position = 0; This. move =function(target, speed) { This. Position + = (Target- This. position) *Speed ; }}varTV ={O: [], screen: {}, Grid: {size:4, Bordersize:6, zoomed:false}, Angle: {x:Newlibrary.ease (), Y:Newlibrary.ease ()}, Camera: {x:Newlibrary.ease (), Y:Newlibrary.ease (), Zoom:Newlibrary.ease (), FocalLength:750}, Init:function () { This. screen.obj = document.getElementById (' Screen '); varimg = document.getElementById (' bankimages '). getElementsByTagName (' img ')); This. Screen.obj.onselectstart =function() {return false; } This. Screen.obj.ondrag =function() {return false; } varNI = 0; varn = (TV.GRID.SIZE/2)-. 5; for(vary =-N; Y <= N; y++) { for(varx =-N; x <= N; X + +) { varo = document.createelement (' img '); vari = img[(ni++)%Img.length]; O.classname= ' Tvout '; O.SRC=i.src; Tv.screen.obj.appendChild (o); O.point3d={x:x, y:y, Z:Newlibrary.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); varx = ( This. point3d.x-tv.camera.x.position) *tv.camera.zoom.position; vary = ( This. point3d.y-tv.camera.y.position) *tv.camera.zoom.position; varz = This. point3d.z.position *tv.camera.zoom.position; varXY = tv.angle.cx * Y-TV.ANGLE.SX *Z; varXZ = tv.angle.sx * y + tv.angle.cx *Z; varYZ = tv.angle.cy * Xz-tv.angle.sy *x; varYX = 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 =NewImage (); 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 () { varn \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; n \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(vari = 0, o; o = TV. O[i]; i++) {O.calc (); O.draw (); } setTimeout (Tv.run,32); }}varMouse ={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>onresize=tv.resize; Tv.init ();</script> </body>JavaScript effects image effects zoom in, zoom out, rotate