vml绘图(图表)功能示例

所在位置：论坛首页 -> ┈┋电脑网络┋┈ -> 网页制作技术 -> vml绘图(图表)功能示例


	新的帖子

	发起交易

	任务悬赏

	发起投票

标题:vml绘图(图表)功能示例

a竹子

等级:职业侠客

权限:普通用户

积分:73

金钱:338

声望:168

经验:155

发帖数:200

资料

短消息

2008-8-22 10:37:53

VML折线图，曲线图都很方便,不需要任何插件，VML只支持IE

以下是HTML网页特效代码，点击运行按钮可查看效果：
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40";;;;>
<title>利用vml实现曲线图的简单例子</title>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<style>
v\:* { behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
.shape { behavior: url(#default#VML) }
.node{font-size:11px;font-family:Verdana;width:1px;color:#000000;}
.node a{color:#000000;text-decoration:none}
.node a:hover{color:#FF0000;text-decoration:underline}
.highlight{background-color:#FFFFFF;color:#2D6197;border:0px}
.highlight a{color:#2D6197}
img{border:0}
</style>
</head>
<body>
 <div style="position:relative;left:0px;Top:0px;height:240px;font-family:Verdana;font-size:11px">
 <v:rect id="BackRect" style='position:absolute;left:30px;Top:20px;width:538px;height:215px;z-index:1;'/>

 <v:rect style='position:absolute;left:30px;top:0px;width:12px;height:12px;z-index:3;' fillcolor="#E7F3FF"/>
 访问页面数

 <v:rect style='position:absolute;left:130px;top:0px;width:12px;height:12px;z-index:3;' fillcolor="#9CC7FF"/>
 访问ＩＰ数
 1350

 2700

 4050

 5400

 <v:line style='position:absolute;left:30px;Top:20px;z-index:2' from="1px,50px" to="537px,50px" strokecolor="#808080">
 <v:stroke src="./images/image001.gif" title="" filltype="pattern"/>
 </v:line>

 <v:line style='position:absolute;left:30px;Top:20px;z-index:2' from="1px,100px" to="537px,100px" strokecolor="#808080">
 <v:stroke src="./images/image001.gif" title="" filltype="pattern"/>
 </v:line>

 <v:line style='position:absolute;left:30px;Top:20px;z-index:2' from="1px,150px" to="537px,150px" strokecolor="#808080">
 <v:stroke src="./images/image001.gif" title="" filltype="pattern"/>
 </v:line>0
 1
 2
 3

 4
 5

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="98px,176.074074074074px" to="120px,186.888888888889px" strokecolor="#00659C"/>

 6

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="120px,186.888888888889px" to="142px,193.407407407407px" strokecolor="#00659C"/>

 7

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="142px,193.407407407407px" to="164px,195.111111111111px" strokecolor="#00659C"/>


 8

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="164px,195.111111111111px" to="186px,191px" strokecolor="#00659C"/>


 9

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="186px,191px" to="208px,181.62962962963px" strokecolor="#00659C"/>


 10

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="208px,181.62962962963px" to="230px,164.555555555556px" strokecolor="#00659C"/>


 11

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="230px,164.555555555556px" to="252px,147.555555555556px" strokecolor="#00659C"/>


 12

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="252px,147.555555555556px" to="274px,127.962962962963px" strokecolor="#00659C"/>


 13

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="274px,127.962962962963px" to="296px,109.333333333333px" strokecolor="#00659C"/>


 14

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="296px,109.333333333333px" to="318px,97.5925925925926px" strokecolor="#00659C"/>

 15

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="318px,97.5925925925926px" to="340px,92.3333333333333px" strokecolor="#00659C"/>


 16

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="340px,92.3333333333333px" to="362px,78.2962962962963px" strokecolor="#00659C"/>


 17

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="362px,78.2962962962963px" to="384px,67.8888888888889px" strokecolor="#00659C"/>


 18

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="384px,67.8888888888889px" to="406px,60.5555555555555px" strokecolor="#00659C"/>


 19

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="406px,60.5555555555555px" to="428px,53.4814814814815px" strokecolor="#00659C"/>


 20

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="428px,53.4814814814815px" to="450px,40.4074074074074px" strokecolor="#00659C"/>


 21

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="450px,40.4074074074074px" to="472px,33.2592592592593px" strokecolor="#00659C"/>


 22

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="472px,33.2592592592593px" to="494px,25.4814814814815px" strokecolor="#00659C"/>

 23

 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="494px,25.4814814814815px" to="516px,25.1481481481482px" strokecolor="#00659C"/>


 <v:line style='position:absolute;left:30px;Top:20px;z-index:3' from="0px,109px" to="538px,109px" strokecolor=red>
 <v:stroke src="./images/image001.gif" title="" filltype="pattern"/>
 </v:line></div></body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

2008-8-22 10:37:53

第1页共页共0个回复

<< >>

快速回复

支持UBB,HTML标签

高级回复

操作选项:评分加精解精奖惩设专题设公告解公告固顶总固顶解固顶结帖解结帖锁帖解锁移帖删帖


首页 \| 购买指南 \| 虚拟主机 \| 特色介绍 \| 下载中心 \| 支付方式	Copyright 2004-2008 BBSGood.com Powered By: BBSGood.Speed Version 5.0
咨询电话：0575-85513832、0575-85513825(传真)、7*24小时咨询服务：13606552007	不良信息举报中心浙ICP备05029817号
业务QQ:38958768、客服QQ1:415896239、客服QQ2:343896043、MSN:jccsxx@hotmail.com