一张图片实现的超酷效果网站导航菜单

dn001 2009-06-21 08:55:27

<head> <style> .point{ position: absolute; width: 10; height: 10;background-color: #AAAAAA;overflow: hidden} </style> <script> speed=4; points=new Array(); angle=speed; rotXok=true; rotYok=true; rotZok=false; function Obj(div){return this;} objpro=Obj.prototype; objpro.moveTo=function(x,y,z){this.x=(x); this.y=(y); this.z=z; } points=new Array(); function movemat(){ /* 2 - 1 1=1,2 2,3,7,6 / / 2=3,4 1,5,8,4 3 - 4 3=5,6 4=7,8 6 - 5 5=9,10 / / 6=11,12 7 - 8 7=13,14 8=15,16 */ pt1=Math.round(points[1].x); pt2=Math.floor(points[1].y); pt3=Math.floor(points[2].x); pt4=Math.floor(points[2].y); pt5=Math.floor(points[3].x); pt6=Math.floor(points[3].y); pt7=Math.floor(points[4].x); pt8=Math.floor(points[4].y); pt9=Math.floor(points[5].x); pt10=Math.floor(points[5].y); pt11=Math.floor(points[6].x); pt12=Math.floor(points[6].y); pt13=Math.floor(points[7].x); pt14=Math.floor(points[7].y); pt15=Math.floor(points[8].x); pt16=Math.floor(points[8].y); sq1="m "+pt1+","+pt2+" l "+pt3+","+pt4+" "+pt5+", "+pt6+" "+pt7+", "+pt8+" x e"; sq2="m "+pt9+","+pt10+" l "+pt11+","+pt12+" "+pt13+","+pt14+" "+pt15+","+pt16+" x e"; sq3="m "+pt3+","+pt4+" l "+pt5+","+pt6+" "+pt13+","+pt14+" "+pt11+","+pt12+" x e"; sq4="m "+pt1+","+pt2+" l "+pt9+","+pt10+" "+pt15+","+pt16+" "+pt7+","+pt8+" x e"; v1.path=sq1; v2.path=sq2; v3.path=sq3; v4.path=sq4} function init(){ for(i=1; i <=8; i++){ points[i]=new Obj('v'+i);} points[1].x=45; points[1].y=15; points[1].z=60; points[2].x=15; points[2].y=15; points[2].z=60; points[3].x=15; points[3].y=15; points[3].z=90; points[4].x=45; points[4].y=15; points[4].z=90; points[5].x=45; points[5].y=45; points[5].z=60; points[6].x=15; points[6].y=45; points[6].z=60; points[7].x=15; points[7].y=45; points[7].z=90; points[8].x=45; points[8].y=45; points[8].z=90; for(i=1; i <=8; i++){ points[i].moveTo(points[i].x,points[i].y,points[i].z)} } function rot(){ a=degToRad(angle); a2=degToRad(angle); for(i=1; i <= 8; i++){ mat=[points[i].x,points[i].y,points[i].z-75,1]; rotX=[[1,0,0,0],[0,Math.cos(a),-Math.sin(a),0],[0,Math.sin(a),Math.cos(a),0],[0,0,0,1]]; rotY=[[Math.cos(a2),0,Math.sin(a2),0],[0,1,0,0],[-Math.sin(a2),0,Math.cos(a2),0],[0,0,0,1]]; rotZ=[[Math.cos(a),-Math.sin(a),0,0],[Math.sin(a),Math.cos(a),0,0],[0,0,1,0],[0,0,0,1]]; if(rotXok){mat=matrixMultiply(mat,rotX)}; if(rotYok){mat=matrixMultiply(mat,rotY)}; if(rotZok){mat=matrixMultiply(mat,rotZ)}; points[i].x=mat[0]; points[i].y=mat[1]; points[i].z=mat[2] + 75; points[i].moveTo(points[i].x,points[i].y,points[i].z); movemat(); } setTimeout('rot()',50); } function matrixMultiply(A,B) { var retVal=[0,0,0]; for(var i=0;i<4;i++) { retVal[i]=0; for(var s=0;s<4;s++) retVal[i] += A[s] * B[i][s] } return retVal; } pi=3.14159; function degToRad(x) { return (( x/(360/(2*pi)) )); } function rotok(oked){ Xok=document.getElementById('rotateX').checked; if(Xok){rotXok=true}else{rotXok=false} Yok=document.getElementById('rotateY').checked; if(Yok){rotYok=true}else{rotYok=false} Zok=document.getElementById('rotateZ').checked; if(Zok){rotZok=true}else{rotZok=false} } </script> <style type="text/css"> v:*{behavior:url(#default#VML);} </style> </head> <body bgcolor="black" text="darkblue"> <script> for(i=1; i <= 4; i++){ document.write('<v:shape id="v'+i+'" filled="false" strokecolor="yellow" style="position:absolute;left:50;top:50;width:200;height:200" coordorigin="0, 0" coordsize="60,60">' +'<v:path v="m 0,0 l 100,0 100,100 0,100 0,100 x e"/></v:shape>'); }init();rot()</script> <br><br><br> <p><font color=red>//转载请注明出处:网页教学网。</font></p>