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

2024-04-27 13:59:57

字体：大中小

来源：转载

供稿：网友

<head><style>.point{ position: absolute; width: 10; height: 10;background-color: #AAAAAA;overflow: hidden}</style><scr<a href="http://ip.vevb.com/">ip</a>t>speed=4;points=new Array();angle=speed;rotXok=true;rotYok=true;rotZok=false;function Obj(div){return this;}obj<a href="http://pr.vevb.com/">PR</a>o=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,43 - 4 3=5,64=7,86 - 5 5=9,10/ / 6=11,127 - 8 7=13,148=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/<a href="http://www.vevb.com/article.asp?typeid=38">CSS</a>">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>

上一篇：网页特效代码：纯CSS制作的网页下拉菜单

下一篇：Flash+JS打造的新浪新闻频道关于香港回归十周年的图片