网页中有趣的齿轮转动特效(无实际使用价值)

2007-08　　作者：佚名　　来源：不详　网友评论　

网页中有趣的齿轮转动特效(无实际使用价值)，网页中有趣的齿轮转动特效(无实际使用价值)，网页特效实例代码，在网页中实现有趣的齿轮转动特效！

<HTML xmlns:v = "urn:schemas-microsoft-com:vml"> <HEAD> <TITLE>网页中有趣的齿轮转动特效</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <OBJECT id=VMLRender classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E></OBJECT> <STYLE>v\:* { BEHAVIOR: url(#VMLRender) } </STYLE> <META content="MSHTML 6.00.2800.1276" name=GENERATOR></HEAD> <BODY onresize=resize() bgColor=#ffffff scroll=no> <DIV id=op></DIV> <SCRIPT> //globals for HSV to RGB conversion irpnt=new Array(2,1,0,0,3,2); igpnt=new Array(3,2,2,1,0,0); ibpnt=new Array(0,0,3,2,2,1); //constants for gears GB=100; GD=30; GA=20; w=0; h=0; kx=0; ky=0; scol=new colour(57,.71,.89); ss=new Array(500,500,500,500,500,500,500,500,500,500,500,500,500,500,500); vs="<DIV id=kal style='position:absolute;left:"+kx+";top:"+ky+";'>"; for(j=0;j<ss.length;j++){ np=30-2*j; sp=makegearpath(np); hue=j*4; dhue=8; dr=(j+1)/2; //if(j%2==0)dr=-dr; vx=rnd(10)-4;if(vx==0)vx=-5; vy=rnd(10)-4;if(vy==0)vy=-5; vs+="<v:shape id='V"+j+"' np="+np+" hue="+hue+" dhue="+dhue+" dr="+dr+" vx="+vx+" vy="+vy+" style='position:absolute;left:"+((500-ss[j])/2)+"px;top:"+((500-ss[j])/2)+"px;height:"+ss[j]+";width:"+ss[j]+";rotation:0;' fill='true' stroke='true' coordsize='2500,2500' coordorigin '-1250,-1250' fillcolor='#fdf9ae' strokecolor='#000000' path='"+sp+"'></v:shape>" } vs+="</div>" document.write(vs); resize(); window.setInterval("frame();",20); function frame(){ for(j=0;j<ss.length;j++){ S=document.all["V"+j]; //animate colour hue=parseInt(S.hue); dhue=parseInt(S.dhue); hue+=dhue; if(hue>=360)hue-=360; S.hue=hue; scol.h=hue; scol.hsv2rgb(); S.fillcolor=scol.rgb; //S.strokecolor=scol.rgb; //animate rotation r=parseFloat(S.style.rotation); dr=parseFloat(S.dr); r+=dr;if(r>=360)r-=360;if(r<0)r+=360; S.style.rotation=r; } } //n=number of points //r1=outer diameter //r2=inner diameter //assumes coordsize='2000,2000' coordorigin '0,0' function makegearpath(n){ var r1,r2,l1,l2 var theta,phi,alpha,beta s=""; theta=2*Math.PI/n; theta2=theta/2 r2=(GB*n)/(2*Math.PI); r1=r2+GD; l1=Math.sqrt((r1*r1+GA*GA)); l2=Math.sqrt((r2*r2+GA*GA)); alpha=Math.atan(GA/r1); beta=Math.atan(GA/r2); phi=Math.PI/2-theta2-beta; s="m "+(1250+Math.round(l2*Math.cos(phi)))+","+(1250+Math.round(l2*Math.sin(phi)))+"l"; for (i=0;i<n;i++){ phi=i*theta+Math.PI/2; if(i>0)s+=","; s+=(1250+Math.round(l2*Math.cos(phi-theta2+beta)))+","+(1250+Math.round(l2*Math.sin(phi-theta2+beta)))+","; s+=(1250+Math.round(l1*Math.cos(phi-alpha)))+ ","+(1250+Math.round(l1*Math.sin(phi-alpha)))+","; s+=(1250+Math.round(l1*Math.cos(phi+alpha)))+ ","+(1250+Math.round(l1*Math.sin(phi+alpha)))+","; s+=(1250+Math.round(l2*Math.cos(phi+theta2-beta)))+","+(1250+Math.round(l2*Math.sin(phi+theta2-beta))); } s+="x e" return(s); } function rnd(n){ return(Math.floor((n+1)*Math.random())); } function resize(){ w=document.body.clientWidth; h=document.body.clientHeight; // bg.style.width=w; // bg.style.height=h; kx=w/2-250; ky=h/2-250; kal.style.left=kx; kal.style.top=ky; } //utility object for HSV to RGB conversion function hsv2rgb(){ pqvt=new Array(4); with(this){ if(s==0){ r=Math.floor(255*v); g=r; b=r; return; } if(h>=360)h=0; nh=h/60; i=Math.floor(nh); f=nh-i; pqvt[2]=255*v; pqvt[0]=pqvt[2]*(1-s) pqvt[1]=pqvt[2]*(1-s*f) pqvt[3]=pqvt[2]*(1-s*(1-f)) r=Math.floor(pqvt[irpnt[i]]); g=Math.floor(pqvt[igpnt[i]]); b=Math.floor(pqvt[ibpnt[i]]); rgb="#"+(65536*r+256*g+b).toString(16); } } function colour(h,s,v){ this.h=h; //0-359 this.s=s; //0-1 this.v=v; //0-1 this.r=0; //0-255 this.g=0; //0-255 this.b=0; //0-255 this.rgb=""; this.hsv2rgb=hsv2rgb; //convert on construction this.hsv2rgb(); } </SCRIPT>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

>> 更多评论