大家看看这个效果...不知道有那位大虾能一同研究一下VML

onmousedown后拖动鼠标,
要结束画线双击就可以了相关VML的资料可以到:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/vml/shape/introduction.asp

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

最近做一个统计图表的Web应用...有所收获,和大家一起分享一下... VML 的魅力...<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>图表</title>
<STYLE>
v\:* {
BEHAVIOR: url(#default#VML)
 }
.Chart{
COLOR: black; FONT-FAMILY: "宋体"; FONT-SIZE: 9.2pt; TEXT-ALIGN: right;
}
</STYLE>
</head>
<script language="JavaScript">
function drawLines()
{
var count=0;//画纵坐标
for(var i=0;i<=48;i++){
 var px=200+90*i;
 var newLine = document.createElement("<v:line from='"+px+" 200' to='"+px+" 2800' style='position:absolute;z-index:7'></v:line>");
 group1.insertBefore(newLine);
 if(count%4!=0){
 var newStroke = document.createElement("<v:stroke dashstyle='dot' color='silver'/>");
 newLine.insertBefore(newStroke);
}
else
{
 var newStroke = document.createElement("<v:stroke color='silver'/>");
 newLine.insertBefore(newStroke);
}
count++;
}
count=0; //画横坐标
for(var i=0;i<=35;i++){
 var py=2800-73*count;
 var newLine = document.createElement("<v:line from='200 "+py+"' to='4650 "+py+"' style='position:absolute;z-index:7'></v:line>");
 group1.insertBefore(newLine);
if(count%5!=0){
 var newStroke = document.createElement("<v:stroke dashstyle='dot' color='silver'/>");
 newLine.insertBefore(newStroke);
}
else
{
 var newStroke = document.createElement("<v:stroke color='#c5c9c5' />");
 newLine.insertBefore(newStroke);
}
count++;
}
drawPoint();
}
var PointX=new Array(24);
for(var i=0;i<24;i++)
{
 PointX[i]=Math.round(35*Math.random(1));
}function drawPoint()
{
var strPath="";
for(var i=0;i<=24;i++){
 var tempx=200+90*i*2;
 var tempy=2800-73*PointX[i];
strPath+=" "+tempx+","+tempy;
 //var newPoint = document.createElement("<v:oval fillcolor=red style='position:absolute;left:"+tempx+";top:"+tempy+";width:20px;height:20px;z-index:9'></v:oval>");
}
 //temp.innerText="<v:shape fillcolor=red style='position:absolute;z-index:9' path='"+strPath+"'></v:shape>";
 var newPoint = document.createElement("<v:polyline filled ='f' style='POSITION:absolute;z-index:9' points='"+strPath+"' />");
 group1.insertBefore(newPoint);
}
</script>
<body onload="drawLines();">
<DIV>
<v:group ID="group1" style="WIDTH:500pt;HEIGHT:300pt;" coordsize = "5000,3000">
<v:line from="200 100" to="200 2800" style="position:absolute;z-index:8" strokeweight="1pt" />
<v:line from="150 200" to="200 100" style="position:absolute;z-index:8" strokeweight="1pt" />
<v:line from="200 100" to="250 200" style="position:absolute;z-index:8" strokeweight="1pt" />
风速(米/秒)<v:line from="200 2800" to="4800 2800" style="position:absolute;z-index:8" strokeweight="1pt" />
<v:line from="4700 2750" to="4800 2800" style="position:absolute;z-index:8" strokeweight="1pt" />
<v:line from="4800 2800" to="4700 2850" style="position:absolute;z-index:8" strokeweight="1pt" /><v:rect style="WIDTH:5000px;HEIGHT:3000px;" coordsize="21600,21600" fillcolor="white">
<v:shadow on="t" type="single" color="silver" offset="5pt,3pt"></v:shadow>
</v:rect><v:rect style="LEFT:40px;TOP:40px;POSITION:absolute;WIDTH:4930px;HEIGHT:2930px;" coordsize="21600,21600" fillcolor="white" strokeweight="1.5pt">
</v:rect>
0.0
0.5
1.0
1.5
2.0
2.5
3.0
3.520时
22时
0时
2时
4时
6时
8时
10时
12时
14时
16时
18时
20时</v:group></DIV>
<div id="temp">
</div>
</body>
</html>
国内很少基本上都没有发现研究VML的地方...
国外这方面的应用都很多了...
比如说..地图,统计图表,还有很多的3D动画,都可以用VML完成...
等这个项目完成了,我归纳一下,和大家一起分享..
Windows98se Windows2000 使用IE都可以看到
如果原来是ＩＥ5.0 升级成 IE6.0 然后还原成 IE5.0　好象就不行了．．