JS实现跟随鼠标立体翻转图片的方法
本文实例讲述了JS实现跟随鼠标立体翻转图片的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Wannatellher-interactiveDHTML</title>
<metahttp-equiv="imagetoolbar"content="no">
<styletype="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;
}
#screenimg{
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>
<scripttype="text/javascript">
/*====Easingfunction====*/
varLibrary={};
Library.ease=function(){
this.target=0;
this.position=0;
this.move=function(target,speed){
this.position+=(target-this.position)*speed;
}
}
vartv={
/*====variables====*/
O:[],
fps:0,
screen:{},
angle:{
x:newLibrary.ease(),
y:newLibrary.ease()
},
camera:{
x:newLibrary.ease(),
y:newLibrary.ease()
},
create3DHTML:function(i,x,y,z,sw,sh){
/*====createHTMLimageelement====*/
varo=document.createElement('img');
o.src=i.src;
tv.screen.obj.appendChild(o);
/*====3Dcoordinates====*/
o.point3D={
x:x,
y:y,
z:newLibrary.ease(),
sw:sw,
sh:sh,
w:i.width,
h:i.height
};
o.point3D.z.target=z;
/*====pushobject====*/
o.point2D={};
tv.O.push(o);
/*====onmouseoverevent====*/
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;
}
returnfalse;
}
/*====onmousedownevent====*/
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();
}
}
}
/*====main3Dfunction====*/
o.animate=function(){
/*====3Dcoordinates====*/
varx=this.point3D.x-tv.camera.x.position;
vary=this.point3D.y-tv.camera.y.position;
this.point3D.z.move(this.point3D.z.target,this.point3D.z.target?.15:.08);
/*====rotations====*/
varxy=tv.angle.cx*y-tv.angle.sx*this.point3D.z.position;
varxz=tv.angle.sx*y+tv.angle.cx*this.point3D.z.position;
varyz=tv.angle.cy*xz-tv.angle.sy*x;
varyx=tv.angle.sy*xz+tv.angle.cy*x;
/*====2Dtransform====*/
varscale=tv.camera.focalLength/(tv.camera.focalLength+yz);
x=yx*scale;
y=xy*scale;
varw=Math.round(Math.max(0,this.point3D.w*scale*this.point3D.sw));
varh=Math.round(Math.max(0,this.point3D.h*scale*this.point3D.sh));
/*====HTMLrendering====*/
varo=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);
}
},
/*====initscript====*/
init:function(structure,FL,mouseZ,rx,ry){
this.screen.obj=document.getElementById('screen');
this.screen.obj.onselectstart=function(){returnfalse;}
this.screen.obj.ondrag=function(){returnfalse;}
this.mouseZ=mouseZ;
this.camera.focalLength=FL;
this.angle.rx=rx;
this.angle.ry=ry;
/*====createobjects====*/
vari=0,o;
while(o=structure[i++])
this.create3DHTML(o.img,o.x,o.y,o.z,o.sw,o.sh);
/*====startscript====*/
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);
},
/*====resizewindow====*/
resize:function(){
varo=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;
}
}
},
/*====mainloop====*/
run:function(){
tv.fps++;
/*====motionease====*/
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);
/*====anglessinandcos====*/
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);
/*====loopthroughimages====*/
vari=0,o;
while(o=tv.O[i++])o.animate();
},
/*====traceframesperseconds====*/
dFPS:function(){
document.getElementById('FPS').innerHTML=tv.fps+'FPS';
tv.fps=0;
}
}
/*====globalmouseposition====*/
varmouse={
x:0,
y:0
}
document.onmousemove=function(e){
if(window.event)e=window.event;
mouse.x=e.clientX;
mouse.y=e.clientY;
returnfalse;
}
/*====startingscript====*/
onload=function(){
onresize=tv.resize;
/*====buildgrid====*/
varimg=document.getElementById('bankImages').getElementsByTagName('img');
varstructure=[];
for(vari=-300;i<=300;i+=120)
for(varj=-300;j<=300;j+=120)
structure.push({img:img[0],x:i,y:j,z:0,sw:.5,sh:.5});
/*====let'sgo====*/
tv.init(structure,350,-200,.005,.0025);
}
</script>
</head>
<body>
<divid="screen"></div>
<divid="bankImages">
<imgalt=""src="images/p2.jpg">
</div>
<divid="FPS"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。