VML完美版星星

晨曦之光 发布于 2012/03/09 14:56
阅读 276
收藏 0

<HTML xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD>
<TITLE>VML Animation - Stars-www.51windows.Net</TITLE>
<OBJECT classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E
id=VMLRender></OBJECT>
<STYLE>v/:* {
 BEHAVIOR: url(#VMLRender)
}
</STYLE>

</HEAD>
<BODY bgColor=#ffffff onresize=resize() scroll=no>
<v:rect id=bg
 style="HEIGHT:400pt;LEFT:0pt;POSITION:absolute;TOP:0pt;WIDTH:880pt;Z-INDEX:-1"
 coordsize = "21600,21600"
 fillcolor = "#a8f4f7"
 strokecolor="#000000">
 <v:fill type = "gradient"
  color2 = "#003159"
  angle = "45"
  focus = "100%"
  focusposition = ".5,.5"
  focussize = "0,0"
  method = "linear sigma">
  </v:fill>
 </v:rect>
<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);
//
w=0;
h=0;
resize();
scol=new colour(57,.61,.89);
ss=new Array(50,90,75,50,60);
vs="";
for(j=0;j<ss.length;j++){
 np=3+rnd(6);
 sp=makestarpath(np,1000,900);
 hue=rnd(360);
 dhue=1+rnd(10);
 theta=0;
 dtheta=0.1+0.2*Math.random();
 dr=rnd(14)-6;if(dr==0)dr=-7;
 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+" theta="+theta+" dtheta="+dtheta+" vx="+vx+" vy="+vy+" style='position:absolute;left:"+(6+rnd(w-ss[j]-12))+"px;top:"+(6+rnd(h-ss[j]-12))+"px;height:"+ss[j]+";width:"+ss[j]+";rotation:0;' fill='true' stroke='false' coordsize='2000,2000' coordorigin '0,0' fillcolor='#fdf9ae' strokeweight='2emu' path='"+sp+"'><v:fill type='gradientRadial' color2='#6f6022' angle='45' focus='100%' focusposition='.5,.5' focussize='2,2' method='linear sigma'></v:fill></v:shape>"
}
document.write(vs);

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;
  //animate rotation
  r=parseInt(S.style.rotation);
  dr=parseInt(S.dr);
  r+=dr;if(r>=360)r-=360;if(r<0)r+=360;
  S.style.rotation=r;
  //animate geometry
  np=parseInt(S.np);
  theta=parseFloat(S.theta);
  dtheta=parseFloat(S.dtheta);
  theta+=dtheta;if(theta>Math.PI)theta-=2*Math.PI;
  sp=makestarpath(np,1000,200+1000*Math.sin(theta));
  S.path=sp;
  S.theta=theta;
  //move & bounce stars
  x=S.style.pixelLeft;
  y=S.style.pixelTop;
  vx=parseInt(S.vx);
  vy=parseInt(S.vy);
  x+=vx;
  y+=vy;
  if(x<0){vx=-vx;x+=vx;}
  if(x>w-ss[j]){vx=-vx;x=2*(w-ss[j])-x;}
  if(x>w-ss[j])x=0;
  if(x<0)x=0;
  if(y<0){vy=-vy;y+=vy;}
  if(y>h-ss[j]){vy=-vy;y=2*(h-ss[j])-y;}
  if(y>h-ss[j])y=0;
  if(y<0)y=0;
  S.style.pixelLeft=x;
  S.style.pixelTop=y;
  S.vx=vx;
  S.vy=vy;
 }
}

//n=number of points
//r1=outer diameter
//r2=inner diameter
//assumes coordsize='2000,2000' coordorigin '0,0'
function makestarpath(n,r1,r2){
 s="";
 pa=2*Math.PI/n;
 ss1=Math.PI/2;
 ss2=ss1-pa/2;
 x1=Math.floor(r1*Math.cos(ss1));
 y1=Math.floor(-r1*Math.sin(ss1));
 x2=Math.floor(r2*Math.cos(ss2));
 y2=Math.floor(-r2*Math.sin(ss2));
 s="m "+(x2+1000)+","+(y2+1000)+" l ";
 for (i=1;i<=n;i++){
  if(i>1)s+=","
  s+=(x1+1000)+","+(y1+1000)+",";
  s1=ss1+i*pa;
  s2=ss2+i*pa;
  x1=Math.floor(r1*Math.cos(s1));
  y1=Math.floor(-r1*Math.sin(s1));
  x2=Math.floor(r2*Math.cos(s2));
  y2=Math.floor(-r2*Math.sin(s2));
  s+=(x2+1000)+","+(y2+1000);
 }
 s+=" 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;
}

//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>
</BODY></HTML> 


原文链接:http://blog.csdn.net/21aspnet/article/details/1538051
加载中
返回顶部
顶部