js做的NB的3D旋转效果

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >  
< html >  
< head >  
< title > Wanna tell her - interactive DHTML  </ title >  
< meta  http-equiv ="imagetoolbar"  content ="no" >  
< style  type ="text/css" >  
html  {  
overflow :  hidden ;  
}  
body  {  
position :  absolute ;  
margin :  0px ;  
padding :  0px ;  
background :  #fff ;  
width :  100% ;  
height :  100% ;  
}  
#screen  {  
position :  absolute ;  
left :  10% ;  
top :  10% ;  
width :  80% ;  
height :  80% ;  
background :  #fff ;  
}  
#screen img  {  
position :  absolute ;  
cursor :  pointer ;  
width :  0px ;  
height :  0px ;  
-ms-interpolation-mode : nearest-neighbor ;  
}  
#bankImages  {  
visibility :  hidden ;  
}  
#FPS  {  
position :  absolute ;  
right :  5px ;  
bottom :  5px ;  
font-size :  10px ;  
color :  #666 ;  
font-family :  verdana ;  
}  

</ style >  

< script  type ="text/javascript" >  
/*  ==== Easing function ====  */  
var  Library  =  {}; 
Library.ease  =   function  () { 
this .target  =   0 ; 
this .position  =   0 ; 
this .move  =   function  (target, speed) { 
this .position  +=  (target  -   this .position)  *  speed; 
} 
} 

var  tv  =  { 
/*  ==== variables ====  */  
O : [], 
fps :  0 , 
screen : {}, 
angle : { 
x :  new  Library.ease(), 
y :  new  Library.ease() 
}, 
camera : { 
x    :  new  Library.ease(), 
y    :  new  Library.ease() 
}, 
create3DHTML :  function  (i, x, y, z, sw, sh) { 
/*  ==== create HTML image element ====  */  
var  o  =  document.createElement( ' img ' ); 
o.src  =  i.src; 
tv.screen.obj.appendChild(o); 
/*  ==== 3D coordinates ====  */  
o.point3D  =  { 
x  : x, 
y  : y, 
z  :  new  Library.ease(), 
sw : sw, 
sh : sh, 
w  : i.width, 
h  : i.height 
}; 
o.point3D.z.target  =  z; 
/*  ==== push object ====  */  
o.point2D  =  {}; 
tv.O.push(o); 

/*  ==== on mouse over event ====  */  
o.onmouseover  =   function  () { 
if  ( this   !=  tv.o) { 
this .point3D.z.target  =  tv.mouseZ; 
tv.camera.x.target  =   this .point3D.x; 
tv.camera.y.target  =   this .point3D.y; 
if  (tv.o) tv.o.point3D.z.target  =   0 ; 
tv.o  =   this ; 
} 
return   false ; 
} 

/*  ==== on mousedown event ====  */  
o.onmousedown  =   function  () { 
if  ( this   ==  tv.o) { 
if  ( this .point3D.z.target  ==  tv.mouseZ)  this .point3D.z.target  =   0 ; 
else  { 
tv.o  =   false ; 
this .onmouseover(); 
} 
} 
} 

/*  ==== main 3D function ====  */  
o.animate  =   function  () { 
/*  ==== 3D coordinates ====  */  
var  x  =   this .point3D.x  -  tv.camera.x.position; 
var  y  =   this .point3D.y  -  tv.camera.y.position; 
this .point3D.z.move( this .point3D.z.target,  this .point3D.z.target  ?  . 15  : . 08 ); 
/*  ==== rotations ====  */  
var  xy  =  tv.angle.cx  *  y   -  tv.angle.sx  *   this .point3D.z.position; 
var  xz  =  tv.angle.sx  *  y   +  tv.angle.cx  *   this .point3D.z.position; 
var  yz  =  tv.angle.cy  *  xz  -  tv.angle.sy  *  x; 
var  yx  =  tv.angle.sy  *  xz  +  tv.angle.cy  *  x; 
/*  ==== 2D transform ====  */  
var  scale  =  tv.camera.focalLength  /  (tv.camera.focalLength  +  yz); 
x  =  yx  *  scale; 
y  =  xy  *  scale; 
var  w  =  Math.round(Math.max( 0 ,  this .point3D.w  *  scale  *   this .point3D.sw)); 
var  h  =  Math.round(Math.max( 0 ,  this .point3D.h  *  scale  *   this .point3D.sh)); 
/*  ==== HTML rendering ====  */  
var  o     =   this .style; 
o.left   =  Math.round(x  +  tv.screen.w  -  w  *  . 5 )  +   ' px ' ; 
o.top     =  Math.round(y  +  tv.screen.h  -  h  *  . 5 )  +   ' px ' ; 
o.width   =  w  +   ' px ' ; 
o.height  =  h  +   ' px ' ; 
o.zIndex  =   10000   +  Math.round(scale  *   1000 ); 
} 
}, 

/*  ==== init script ====  */  
init :  function  (structure, FL, mouseZ, rx, ry) { 
this .screen.obj  =  document.getElementById( ' screen ' ); 
this .screen.obj.onselectstart  =   function  () {  return   false ; } 
this .screen.obj.ondrag         =   function  () {  return   false ; } 
this .mouseZ  =  mouseZ; 
this .camera.focalLength  =  FL; 
this .angle.rx  =  rx; 
this .angle.ry  =  ry; 
/*  ==== create objects ====  */  
var  i  =   0 , o; 
while ( o  =  structure[i ++ ] ) 
this .create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh); 
/*  ==== start script ====  */  
this .resize(); 
mouse.y  =   this .screen.y  +   this .screen.h; 
mouse.x  =   this .screen.x  +   this .screen.w; 
/*  ==== loop ====  */  
setInterval(tv.run,  16 ); 
setInterval(tv.dFPS,  1000 ); 
}, 

/*  ==== resize window ====  */  
resize :  function  () { 
var  o  =  tv.screen.obj; 
if  (o) { 
tv.screen.w  =  o.offsetWidth  /   2 ; 
tv.screen.h  =  o.offsetHeight  /   2 ; 
for  (tv.screen.x  =   0 , tv.screen.y  =   0 ; o  !=   null ; o  =  o.offsetParent) { 
tv.screen.x  +=  o.offsetLeft; 
tv.screen.y  +=  o.offsetTop; 
} 
} 
}, 

/*  ==== main loop ====  */  
run :  function  () { 
tv.fps ++ ; 
/*  ==== motion ease ====  */  
tv.angle.x.move( - (mouse.y  -  tv.screen.h  -  tv.screen.y)  *  tv.angle.rx, . 1 ); 
tv.angle.y.move( (mouse.x  -  tv.screen.w  -  tv.screen.x)  *  tv.angle.ry, . 1 ); 
tv.camera.x.move(tv.camera.x.target, . 025 ); 
tv.camera.y.move(tv.camera.y.target, . 025 ); 
/*  ==== angles sin and cos ====  */  
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); 
/*  ==== loop through images ====  */  
var  i  =   0 , o; 
while ( o  =  tv.O[i ++ ] ) o.animate(); 
}, 

/*  ==== trace frames per seconds ====  */  
dFPS :  function  () { 
document.getElementById( ' FPS ' ).innerHTML  =  tv.fps  +   '  FPS ' ; 
tv.fps  =   0 ; 
} 
} 

/*  ==== global mouse position ====  */  
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 ; 
} 

/*  ==== starting script ====  */  
onload  =   function () { 
onresize  =  tv.resize; 
/*  ==== build grid ====  */  
var  img  =  document.getElementById( ' bankImages ' ).getElementsByTagName( ' img ' ); 
var  structure  =  []; 
for  ( var  i  =   - 300 ; i  <=   300 ; i  +=   120 ) 
for  ( var  j  =   - 300 ; j  <=   300 ; j  +=   120 ) 
structure.push({ img:img[ 0 ], x:i, y:j, z: 0 , sw:. 5 , sh:. 5  }); 
/*  ==== let's go ====  */  
tv.init(structure,  350 ,  - 200 , . 005 , . 0025 ); 
} 

</ script >  
</ head >  

< body >  

< div  id ="screen" >   </ div >  

< div  id ="bankImages" >  
< img  alt =""  src ="图片地址" >  
</ div >  
< div  id ="FPS" >   </ div >  

</ body >  
</ html >