vml精品收集，以祝emu生日快乐

msdn的飞船在IE5下面是错位的 :(

linhaibo(美洲豹)呢？好久都没见到他了。我的vml有一半是他教的呢。http://www.lshdic.com/wenzhang.asp?str=Vml&page=1美洲豹的教程也在上面。

www.lshdic.com的挺适合入门的，也挺实用如：圆角文本框
<html xmlns:v="urn:schemas-microsoft-com:vml">
<style>v\:*      { behavior: url(#default#VML) }</style>
<body>
<v:roundrect strokecolor="black" fillcolor="infobackground" style="position:relative;left:30;top:5;width:130px;height:40px;z-index:9">
<v:shadow on="t" type="single" color="silver" offset="3pt,-3pt"></v:shadow>
<v:textbox id="alertInfo" style="font-family:Arial,Tahoma;font-size:10pt;color:infotext;line-height:18px" inset="2px,2px,2px,2px"></v:textbox>
</v:roundrect>
<v:oval strokecolor="black" fillcolor="infobackground" style="position:relative;left:-120;top:20;width:14px;height:10px;z-index:8">
<v:shadow on="t" type="single" color="silver" offset="3pt,-3pt"></v:shadow>
</v:oval>
<v:oval strokecolor="black" fillcolor="infobackground" style="position:relative;left:-160;top:32;width:10px;height:8px;Z-index:7">
<v:shadow on="t" type="single" color="silver" offset="3pt,-3pt"></v:shadow>
</v:oval>  那还有另一半呢？showshow？

再次祝emu happy birthday!混點分,也來學習學習,還沒學到vml :)

Happy Birthday!!!顺便学习，对vml不了解，能不能说说vml主要用于哪方面，有什么好处？

Gears within Gears, found in a web site<HTML xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD>
<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 onresize=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,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>
</BODY></HTML>

Another - 星光闪耀
<HTML xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD>
<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 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://www.su27.net/vml/index.html
下面摘一點點: (借花獻佛^_^)
VML的基本概念
    VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的。VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。
    VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。
***動態生成vml
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <title>动态创建VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<script language="JavaScript">
function createPoint(x,y,v)
{
var strElement="<v:rect title='"+v+"' style='top:"+x+";left:"+y+"width:100;height:100'></v:rect>";
var newPoint = document.createElement(strElemnt);
group1.insertBefore(newPoint);
}
</script>
<body>
<v:group ID="group1" style="WIDTH:200px;HEIGHT:200px;" coordsize = "200,200">
</v:group>
<iframe src="readData.asp" name="data" style="display:none"></iframe>
</body>
</html>相应的在 readData.asp 里面:
<script>
<%
'数据库连接部分
'读数据部分
Do Until rs.EOF
%>
  parent.createPoint(<%=x%>,<%=y%>,<%=value%>);
<%
Loop
'数据库关闭部分
%>
</script>

支持！！！！
<html><head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<meta content="Microsoft FrontPage 4.0" name="GENERATOR">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>随便画，看看效果</title>
</head><body><object classid="CLSID:0002E500-0000-0000-C000-000000000046" height="100%"
id="ChartSpace1" width="100%">
</object>
<script language=VBScript>dim serdim xpt()
dim ypt()
dim curptdim maxdim width, heightSub Window_OnLoad()
    window.status = "Click to set a point; double-click to end the shape."

    width = chartspace1.offsetwidth
    height = chartspace1.offsetheight

    curpt = 0
    max = 50

    redim xpt(max)
    redim ypt(max)

    set ch = chartspace1.charts.add
    ch.type = chartspace1.constants.chChartTypeScatterLineFilled

    ch.axes(0).scaling.hasautomaximum = false
    ch.axes(0).scaling.hasautominimum = false
    ch.axes(1).scaling.hasautomaximum = false
    ch.axes(1).scaling.hasautominimum = false

    ch.axes(0).scaling.minimum = 0
    ch.axes(1).scaling.minimum = 0
    ch.axes(0).scaling.maximum = 10000
    ch.axes(1).scaling.maximum = 10000

    ch.axes(0).scaling.orientation = 1

    ch.axes.delete(0)
    ch.axes.delete(0)

    set ser = ch.seriescollection.add
    ser.datalabelscollection.add
End Sub
Sub Window_onResize()
    width = chartspace1.offsetwidth
    height = chartspace1.offsetheight
End Sub
Sub ChartSpace1_MouseMove(e)
    xpt(curpt) = CInt(e.X*10000/width)
    ypt(curpt) = CInt(e.Y*10000/height)

    ser.setdata 4, -1, xpt
    ser.setdata 3, -1, ypt

    chartspace1.refresh
End Sub
Sub chartspace1_click(e)
    xpt(curpt) = CInt(e.X*10000/width)
    ypt(curpt) = CInt(e.Y*10000/height)
    ser.setdata 4, -1, xpt
    ser.setdata 3, -1, ypt    curpt = curpt+1

    if curpt > max then
        call newseries
    end if

End Sub
Sub chartspace1_dblclick(e)
    xpt(curpt) = null
    ypt(curpt) = null
    ser.setdata 4, -1, xpt
    ser.setdata 3, -1, ypt

    call newseriesEnd Sub
Sub newseries
    ser.datalabelscollection.delete(0)

    set ser = ser.parent.seriescollection.add
    ser.datalabelscollection.add

    for i = 0 to max
        xpt(i) = null
        ypt(i) = null
    next

    curpt = 0
End Sub</script></body></html>

原来美洲豹的教程还有这个地址可以看的啊。
重提一下http://www.su27.net/vml/step313.html中提到的一个问题：--------------------------------------------------------------------
我先研究 http://www.w3.org/TR/NOTE-VML 里面有写关于 path 里面的 ae (AngleEllipseTo) 命令。那个命令确实可以很简单的完成，但它有 6 个参数，最后两个参赛很难理解。因为在一些例子中，这两个数非常大，五六位之多。不得其解
--------------------------------------------------------------------我后来写的drawpie函数中用的就是ae命令，仔细看过的网友可能会觉得
var maxScale = 360<<16
这行很费解。其实ae后面那两个参数一个是开始的角度，一个是跨越的角度，这两个角度的单位有点奇怪，是将度数左移16位（或者乘以65536），所以会非常大。这个比例我是试验出来的，没有参考过相关文档，也不知为什么会这么规定。

大家可曾发现现在市面上的出版物有没有vml的教程的？我曾留意过一断时间，只发现在《xml应用大全》里面发现了一章，写的还挺详细。不知有没有更好更详尽的教程？

嘿嘿，emu生日快乐！
大家话的可真漂亮呀。
不过VML还是没有提供GDI接口，要是提供了，就可以更精彩了。

呵呵～～生日快乐啊！我也来一个对话式文本框：）<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv=Content-Type content="text/html; charset=GB2312">
<style>
v\:* {behavior:url(#default#VML);}
</style>
</head>
<body>
<v:shapetype id="jnkcVML" coordsize="21600,21600" o:spt="63" adj="1350,25920" path="wr0,,21600,21600@15@16@17@18l@21@22xe">
</v:shapetype>
<v:shape type="#jnkcVML" style='position:absolute;left:100;top:100;width:140;height:40' adj="1590,34671" fillcolor="#0cf" strokecolor="#f90" strokeweight="3">
<v:textbox>
<INPUT id="jnkcInput" style="width:100%;height:100%;background-color:#0cf;border:0" />
</v:textbox>
</v:shape>
</body>
</html>

emu 兄，祝你生日快乐！！这么多人为你边生日，感觉羡慕。
      iiiiiiiiiiiiiiiiiiiii
     |||||||H|A|P|P|Y|||||||
   __|_____________________|__
  |\/\/\/\/\/\/\/\/\\/\/\/\/\/|
  |||||||B|I|R|T|H|D|A|Y|||||||  生日快乐
  |,,,,,,,,,,,,,,,,,,,,,,,,,,,|
  @@@@@@@@@@M@E@I@Z@Z@@@@@@@@@@

精品这么少？其实WebFx的Clock也不错呀，今晚上揭贴。

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<object id="VMLRender" codebase="vgx.dll" classid="CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E"></object>
<style>

</style>

<script>
function updatePointers() {
var now = new Date();

secondsPointer.style.rotation = now.getSeconds() * 6;
minutesPointer.style.rotation = now.getMinutes() * 6 + now.getSeconds() / 10;
hoursPointer.style.rotation = now.getHours() * 30 + now.getMinutes() / 2;
}window.attachEvent("onload", initVMLClock);function initVMLClock() {
updatePointers();
window.setInterval("updatePointers()", 1000);
}
</script>
<v:group id="clock" coordsize="100 100" style="width: 200px; height: 200px; position: relative; filter: alpha(opacity=90);">
<v:oval style="width: 100%; height: 100%">
<v:stroke weight="10px" color="#eeeeee"/>

</v:oval> <v:group id="secondsPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<v:line from="50,50" to="50,5">
<v:stroke weight="2px" endcap="round" color="navy"/>
</v:line>
</v:group> <v:group id="minutesPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<v:line from="50,50" to="50,8">
<v:stroke weight="4px" endcap="round" color="navy"/>
</v:line>
</v:group> <v:group id="hoursPointer" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<v:line from="50,50" to="50,18">
<v:stroke weight="7px" endcap="round" color="navy"/>
</v:line>
</v:group></v:group>to xizi2002,你的蛋糕底下还有meizz的名字呢，呵呵

呵呵，原来蛋糕上有签名的，秋水就是细心。以前就看到秋水画的曲线图，没有更新的vml作品吗？

再次住emu生日快乐！顺便收藏，嘿嘿

祝 emu生日快乐
祝大家也快乐

调试易

vml精品收集，以祝emu生日快乐

解决方案 »