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

王朝html/css/js·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

<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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航