用VML程序做成的许多种基本效果，看看会有收获的哟

用VML程序做成的许多种基本效果，看看会有收获的哟

- 中国WEB开发者网络 (http://www.webasp.net)
-- 网页特效 (http://www.webasp.net/javascript/)
--- 用VML程序做成的许多种基本效果，看看会有收获的哟 (http://www.webasp.net/javascript/1/726.htm)

-- 发布日期： 2005-07-01

<center>VML赏析五</center>
 
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE><center>
<v:group style="width:200px;height:200px;position:relative;" CoordOrig="0,0" CoordSize="2800,2800">
<v:line from="0,0" to="2800,0" style="Z-INDEX:8;" strokeweight="1pt">
<v:stroke EndArrow="classic"/>
</v:line>
<v:line from="0,0" to="0,2800" style="Z-INDEX:8;" strokeweight="1pt">
<v:stroke EndArrow="classic"/>
</v:line>
<v:rect title="CoordOrig='0,0' CoordSize='2800,2800'" fillcolor="red" style="Z-INDEX:9;width:1000;height:1000"></v:rect>
</v:group>
 
<v:group style="width:140px;height:140px;position:relative;" CoordOrig="-1400,-1400" CoordSize="2800,2800">
<v:line from="-1400,0" to="1600,0" style="Z-INDEX:8;" strokeweight="1pt">
<v:stroke EndArrow="classic"/>
</v:line>
<v:line from="0,-1400" to="0,1400" style="Z-INDEX:8;" strokeweight="1pt">
<v:stroke StartArrow="classic"/>
</v:line>
<v:rect title="CoordOrig='-1400,-1400' CoordSize='2800,2800'" fillcolor="blue" style="Z-INDEX:9;width:1000;height:1000"></v:rect>
</v:group> 
 
<v:line from="0,0" to="100,200" style="position:relative;"/>

<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100 100,200" style="position:relative"/>

<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative">
<v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />
</v:PolyLine>
 
 <v:Rect style="position:relative;width:100;height:50px"/>

<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>
 

<v:RoundRect style="position:relative;width:120;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:TextBox inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello world!</v:TextBox>
</v:RoundRect>
 <v:oval style="position:relative;width:100;height:100"/>

 
<v:arc filled=false style="position:relative;width:100;height:100" StartAngle="0" EndAngle="270" />
 
 
<v:group ID="group1" style="position:relative;WIDTH:200px;HEIGHT:200px;" coordsize = "2000,2000">
<v:rect style="WIDTH:2000px;HEIGHT:2000px" fillcolor="#99cccc">
<v:shadow on="t" type="single" color="silver" offset="5pt,5pt"></v:shadow>
</v:rect>
 
<v:oval style="position:relative;top:100;left:100;width:1000;height:1000;z-index:7;" fillcolor="red" strokeColor="red"></v:oval>
<v:rect style="position:relative;top:500;left:300;width:1000;height:1000;z-index:8;" fillcolor="blue" strokeColor="blue"></v:rect>
<v:line from="200,200" to="1000,1700" style="z-index:9" fillcolor="yellow" strokeColor="yellow" strokeWeight=2pt></v:line>
</v:group>
 

 

 
<v:shapetype id="arrowUP" coordsize="6 6"> 
<v:path v="m 3,0 l 0,6,6,6,3,0 x e" />
</v:shapetype>
<v:shapetype id="arrowDown" coordsize="6 6"> 
<v:path v="m 0,0 l 3,6,6,0,0,0 x e" />
</v:shapetype>
<v:shape type="#arrowUP" style="position:relative;width:50;height:50"/>
<v:shape type="#arrowDown" style="position:relative;width:50;height:50"/>
<v:shape fillcolor=blue type="#arrowDown" style="position:relative;width:80;height:80" />
 
 
<v:oval id="circle" style="position:relative;width:100;height:80;" onmouseover="move()" fillcolor=red />
<script language="JScript">
var canmove=false;
function move()
{
circle.style.position="absolute";
canmove=true;
document.onmousemove=new Function("if(canmove){circle.style.posLeft=event.x;circle.style.posTop=event.y;}");
}
document.onclick=new Function("canmove=false");
</script>

webasp.net