VML动态星星 代码如下：
<HTML xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD>
<META NAME="Description" CONTENT="VML Animation - Stars">
<META NAME="Keywords" CONTENT="stars,dhtml, vml, javascript, jscript, animation">
<TITLE>VML Animation - Stars</TITLE>
<OBJECT classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E
id=VMLRender></OBJECT>
<STYLE>v/:* {
BEHAVIOR: url(#VMLRender)
}
</STYLE></HEAD>
<BODY bgColor=#ffffff οnresize=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>
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">
<TITLE>VML Animation - Kaleidoscope</TITLE>
<OBJECT classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E
id=VMLRender></OBJECT>
<STYLE>v/:* {
BEHAVIOR: url(#VMLRender)
}
</STYLE></HEAD>
<BODY bgColor=#ffffff οnresize=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>
Number of Points allowed:
</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>
</BODY></HTML>
VML齿轮效果 代码如下:
<HTML xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD>
<META NAME="Description" CONTENT="VML Animation - Gears within Gears">
<META NAME="Keywords" CONTENT="cogs, gears, dhtml, vml, javascript, jscript, animation">
<TITLE>VML Animation - Gears within Gears</TITLE>
<OBJECT classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E
id=VMLRender></OBJECT>
<STYLE>v/:* {
BEHAVIOR: url(#VMLRender)
}
</STYLE></HEAD>
<BODY bgColor=#ffffff οnresize=resize() 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,betas="";
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>
</BODY></HTML>
VML笑脸 代码如下:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML</title>
<style type="text/css">
<!--
body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none }
A:hover { COLOR: red; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active { font: 9pt "宋体"; cursor: hand; color: #FF0033 }-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body bgcolor="#fef4d9">
<BR>
<STYLE>
v/:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<!--
<v:polyline style="position:relative" Points="0,0 100,100 400,100 400,300">
<v:stroke dashstyle="Dot" EndArrow="Classic"/>
</v:polyline>//-->
<script>
function downShap()
{
var obj = event.srcElement;
obj.Shadow.on = "false"; obj.upx = obj.style.pixelLeft;
obj.upy = obj.style.pixelTop; with(obj.style)
{
pixelLeft += 10;
pixelTop += 10;
}
}function upShap()
{
var obj = event.srcElement;
obj.Shadow.on = "true";
with(obj.style)
{
pixelLeft = obj.upx;
pixelTop = obj.upy;
}
}function downball()
{
var judger = ball.style.pixelTop + 4;
if(judger<=200)
{
ball.style.pixelTop = judger;
}
else
{
var ifup = ball.style.pixelHeight - 4;
if(ifup>=80)
{
ball.style.pixelHeight = ifup;
ball.style.pixelTop += 2;
ball.style.pixelWidth += 2;
}
else
{
setTimeout("upball()",10);
return;
}
}
setTimeout("downball()",10);}
function upball()
{ var judger = ball.style.pixelHeight + 4;
if(judger<=100)
{
ball.style.pixelHeight = judger;
ball.style.pixelTop -= 2;
ball.style.pixelWidth -= 2;
}
else
{
var ifdown = ball.style.pixelTop - 4;
if(ifdown>= 80)
{
ball.style.pixelTop = ifdown;
}
else
{
ball.style.pixelTop = 80;
setTimeout("downball()",10);
return;
}
}
setTimeout("upball()",10);
}function window.onerror()
{
return true;
}</script>
<v:RoundRect style="position:absolute; left:100; top:100; width: 100; height:60; cursor: hand" οnmοuseοver="downShap()" οnmοuseοut="upShap()">
<v:Shadow on="true" / type = "single" color="#b3b3b3" offset="10px,10px"/>
<v:TextBox inset="5px,5px,5px,5px" style="font-size:10pt; color:#000000; font-family: Arial Black">Button</v:TextBox>
</v:RoundRect> <v:Oval id="ball" style="position:absolute; left: 300; top:80; width:100; height:100;">
<v:TextBox inset="5px,5px,5px,5px" style="font-size:25pt; color:#000000; font-family: Arial Black">^_^</TextBox>
</v:Oval>
<script>
upball()
</script>
</body>
</html>
VML特效
原创DickyNet 博主文章分类：JavaScript ©著作权
文章标签 animation function object construction border 文章分类 前端开发
©著作权归作者所有：来自51CTO博客作者DickyNet的原创作品，请联系作者获取转载授权，否则将追究法律责任
提问和评论都可以，用心的回复会被更多人看到
评论
发布评论
相关文章
-
利用卡片翻转特效实现时钟效果
利用动画事件监听和requestanimationframe实现时钟的翻牌特效
requestanimatioframe 动画事件监听 时钟 翻牌 重绘 -
VML书签
html head titleTab Demo 1 modify:www.MicroSystem.cn/title style body { background: white; font-family: ms sans serif, tahoma; font-size: 11px; margin: 0px } /style link type="text/css" rel="stylesheet" href="webtabs.css" script type="text/javascript" src="webtabs.js"/script script
html css javascript 前端 数据 数据库 编程语言
