80、非常酷的VML的类似图片的变换效果

80、非常酷的VML的类似图片的变换效果

<HTML xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD>

<META NAME="Description" CONTENT="VML Animation - Kaleidoscope">

<META NAME="Keywords" CONTENT="kaleidoscope,dhtml, vml, javascript, jscript, animation">

<OBJECT classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E id=VMLRender></OBJECT>

<STYLE>v\:* {BEHAVIOR: url(#VMLRender)}</STYLE>

<BODY bgColor=#ffffff onresize=resize() scroll=no>

<div>

<v:rect id=bg

style="HEIGHT:400pt;LEFT:0pt;POSITION:absolute;TOP:0pt;WIDTH:880pt;Z-INDEX:-1"

coordsize = "21600,21600"

fillcolor = "#c797e2">

<v:fill type = "gradient"

color2 = "#971647"

angle = "45"

focus = "100%"

focusposition = ".5,.5"

focussize = "0,0"

method = "linear sigma">

</v:fill>

</v:rect>

</div>

<DIV id=kal style='position:absolute;left:0;top:0;'></DIV>

<DIV ID=frm style="position:absolute;top:0;">

<FORM name="myform">

<TABLE>

<TR>

<TD>

VML的图片变换功能:

</TD>

</TR>

<TR>

<TD>

<INPUT TYPE=CHECKBOX name=spointse CHECKED>Even numbers<BR>

</TD>

</TR>

<TR>

<TD>

<INPUT TYPE=CHECKBOX name=spointso CHECKED>Odd numbers<BR>

</TD>

</TR>

<TR><TD>Number of Stars</TD></TR>

<TR>

<TD>

<OBJECT ID="scrnumstars"

STYLE="position:relative; left:0;top:0;width:196;height:10"

STYLE="border:2px solid #696969;"

codeBase="http://activex.microsoft.com/controls/mspert10.cab"

CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">

<PARAM NAME="Max" VALUE="12">

<PARAM NAME="Min" VALUE="1">

<PARAM NAME="Position" VALUE="5">

<PARAM NAME="LargeChange" VALUE="2">

<PARAM NAME="Orientation" VALUE="1">

</OBJECT>

</TD>

</TR>

<TR><TD>Minimum Points</TD></TR>

<TR>

<TD>

<OBJECT ID="scrminpts"

STYLE="position:relative; left:0;top:0;width:196;height:10"

STYLE="border:2px solid #696969;"

codeBase="http://activex.microsoft.com/controls/mspert10.cab"

CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">

<PARAM NAME="Max" VALUE="20">

<PARAM NAME="Min" VALUE="3">

<PARAM NAME="Position" VALUE="3">

<PARAM NAME="LargeChange" VALUE="2">

<PARAM NAME="Orientation" VALUE="1">

</OBJECT>

</TD>

</TR>

<TR><TD>Maximum Points</TD></TR>

<TR>

<TD>

<OBJECT ID="scrmaxpts" STYLE="position:relative; left:0;top:0;width:196;height:10" STYLE="border:2px solid #696969;"

codeBase="http://activex.microsoft.com/controls/mspert10.cab" CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">

<PARAM NAME="Max" VALUE="20">

<PARAM NAME="Min" VALUE="3">

<PARAM NAME="Position" VALUE="8">

<PARAM NAME="LargeChange" VALUE="2">

<PARAM NAME="Orientation" VALUE="1">

</OBJECT>

</TD>

</TR>

<TR><TD>Max Rotation Speed</TD></TR>

<TR>

<TD>

<OBJECT ID="scrrotspd" STYLE="position:relative; left:0;top:0;width:196;height:10" STYLE="border:2px solid #696969;"

codeBase="http://activex.microsoft.com/controls/mspert10.cab" CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">

<PARAM NAME="Max" VALUE="100">

<PARAM NAME="Min" VALUE="0">

<PARAM NAME="Position" VALUE="50">

<PARAM NAME="LargeChange" VALUE="5">

<PARAM NAME="Orientation" VALUE="1">

</OBJECT>

</TD>

</TR>

<TR><TD>Max Expansion Speed</TD></TR>

<TR>

<TD>

<OBJECT ID="screxpspd"

STYLE="position:relative; left:0;top:0;width:196;height:10"

STYLE="border:2px solid #696969;"

codeBase="http://activex.microsoft.com/controls/mspert10.cab"

CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">

<PARAM NAME="Max" VALUE="100">

<PARAM NAME="Min" VALUE="0">

<PARAM NAME="Position" VALUE="50">

<PARAM NAME="LargeChange" VALUE="5">

<PARAM NAME="Orientation" VALUE="1">

</OBJECT>

</TD>

</TR>

<TR><TD>Max Colour Speed</TD></TR>

<TR>

<TD>

<OBJECT ID="scrcolspd"

STYLE="position:relative; left:0;top:0;width:196;height:10"

STYLE="border:2px solid #696969;"

codeBase="http://activex.microsoft.com/controls/mspert10.cab"

CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">

<PARAM NAME="Max" VALUE="100">

<PARAM NAME="Min" VALUE="0">

<PARAM NAME="Position" VALUE="50">

<PARAM NAME="LargeChange" VALUE="5">

<PARAM NAME="Orientation" VALUE="1">

</OBJECT>

</TD>

</TR>

</TABLE>

</FORM>

</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);

 

v_spointse=true;

v_spointso=true;

v_scrnumstars=1;

v_scrminpts=3;

v_scrmaxpts=3;

v_scrrotspd=50;

v_screxpspd=50;

v_scrcolspd=50;

 

//alert(document.myform.spointse.value)

w=0;

h=0;

kx=0;

ky=0;

np=0;

maxpoints=30;

maxstars=12;

ss=new Array(500,490,480,470,460,450,440,430);

numstars=5;

scol=new colour(57,.81,.89);

resize();

initkaleidoscope();

 

window.setInterval("frame();",20);

 

function initkaleidoscope(){

var ok=false;

 

v_spointse=document.myform.spointse.checked;

v_spointso=document.myform.spointso.checked;

v_scrnumstars=document.myform.scrnumstars.value;

v_scrminpts=document.myform.scrminpts.value;

v_scrmaxpts=document.myform.scrmaxpts.value;

v_scrrotspd=document.myform.scrrotspd.value;

v_screxpspd=document.myform.screxpspd.value;

v_scrcolspd=document.myform.scrcolspd.value;

if(v_scrminpts>v_scrmaxpts){

v_scrmaxpts=v_scrminpts;

document.myform.scrmaxpts.value=v_scrmaxpts;

}

 

kal.innerHTML="";

vs="";

for(j=0;j<v_scrnumstars;j++){

if(v_scrminpts==v_scrmaxpts){

np=v_scrminpts;

}

else{

np=v_scrminpts+rnd(v_scrmaxpts-v_scrminpts+1);

if(v_spointse!=true)while(np%2!=1)np=v_scrminpts+rnd(v_scrmaxpts-v_scrminpts+1);

if(v_spointso!=true)while(np%2!=0)np=v_scrminpts+rnd(v_scrmaxpts-v_scrminpts+1);

}

hue=rnd(360);

dhue=rnd(v_scrcolspd/6);

theta=0;

dtheta=Math.random()*v_screxpspd/100;

dr=Math.random()*v_scrrotspd/10;if(rnd(2)==0)dr=-dr;

sp=makestarpath(np,500,250*(Math.sin(theta)-1));

vs+="<v:shape id='V"+j+"' np="+np+" hue="+hue+" dhue="+dhue+" dr="+dr+" theta="+theta+" dtheta="+dtheta+" style='position:absolute;left:0px;top:0px;height:500;width:500;rotation:0;opacity:0.5;' fill='true' stroke='true' coordsize='2500,2500' coordorigin '-1250,-1250' fillcolor='#a8f4f7' strokecolor='#a8f4f7' path='"+sp+"'></v:shape>"

}

kal.innerHTML=vs;

}

 

function frame(){

 

if(v_spointse!=document.myform.spointse.checked ||

v_spointso!=document.myform.spointso.checked ||

v_scrnumstars!=document.myform.scrnumstars.value ||

v_scrminpts!=document.myform.scrminpts.value ||

v_scrmaxpts!=document.myform.scrmaxpts.value ||

v_scrrotspd!=document.myform.scrrotspd.value ||

v_screxpspd!=document.myform.screxpspd.value ||

v_scrcolspd!=document.myform.scrcolspd.value){

initkaleidoscope();

}

else{

for(j=0;j<v_scrnumstars;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;

//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,500,250*(Math.sin(theta)-1));

S.path=sp;

S.theta=theta;

}

}

}

 

//n=number of points

//r1=outer diameter

//r2=inner diameter

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+1250)+","+(y2+1250)+" l ";

for (i=1;i<=n;i++){

if(i>1)s+=","

s+=(x1+1250)+","+(y1+1250)+",";

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+1250)+","+(y2+1250);

}

s+=" e"

return(s);

}

 

function rnd(n){

return(Math.floor(n*Math.random()));

}

 

function resize(){

w=document.body.clientWidth;

h=document.body.clientHeight;

bg.style.width=w-206;

frm.style.left=w-206;

bg.style.height=h;

kx=w/2-250-103;

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();

}

 

setInterval("dis();",50);

 

function dis(){

window.status=document.myform.spointse.checked;

}

</script>

 

Write a comment

Comments: 0