当前位置：首页 → 问答吧 → 处女帖：VML 画的中国象棋棋盘

处女帖：VML 画的中国象棋棋盘

时间：2007-09-29

来源：互联网

<html xmlns:v> <head> <title>中国象棋棋盘</title> <STYLE> v\:*{behavior:url(#default#VML);} #line{ z-index:0 } .fontshadow { z-index:2; font:26px 黑体; color:#da0186; } .fontshadow2 { z-index:2; font:26px 黑体; color:#0e6bf7 } </STYLE> </head> <body bgcolor="#dddddd" > <div align="center" style="margin:20px;"> <v:group style=" width:80px; height:90px" coordsize="10,10"> <div style="display:none"> <v:oval id="qizi" style="width:6;height:6;z-index:2;" fillcolor="#f15234"> <v:stroke color="#0f0"/> <v:textbox inset="5px,8px,5px,0" style=" font:26px 黑体;color:#f00">将</v:textbox> </v:oval> </div>  <v:rect style="z-index:-1;width:80px;height:90px" > </v:rect> <v:line id="line" from="0,10" to="80,10" /> <v:line id="line" from="0,20" to="80,20" /> <v:line id="line" from="0,30" to="80,30" /> <v:line id="line" from="0,40" to="80,40" /> <v:line id="line" from="0,50" to="80,50" /> <v:line id="line" from="0,60" to="80,60" /> <v:line id="line" from="0,70" to="80,70" /> <v:line id="line" from="0,80" to="80,80" /> <v:line id="line" from="10,0" to="10,90" /> <v:line id="line" from="20,0" to="20,90" /> <v:line id="line" from="30,0" to="30,90" /> <v:line id="line" from="40,0" to="40,90" /> <v:line id="line" from="50,0" to="50,90" /> <v:line id="line" from="60,0" to="60,90" /> <v:line id="line" from="70,0" to="70,90" /> <v:rect style=" z-index:1; width:80px; height:10px; top:40px;"> <v:textbox inset="10px;20px;20px;20px;" style="font:35px/150% @隶书;"> <span style="padding-right:120px; font-weight:800;"> 楚河</span> <span style="padding-right:120px;filter:fliph ;height:10px;"> 汉界</span> </v:textbox> </v:rect> <v:line id="line" from="50,0" to="30,20" /> <v:line id="line" from="30,0" to="50,20" /> <v:line id="line" from="50,90" to="30,70" /> <v:line id="line" from="30,90" to="50,70" />  <v:polyline style="z-index:0;top:0; left:0;" points="9,17,9,19,7,19" /> <v:polyline style="z-index:0;top:0; left:0;" points="9,23,9,21,7,21" /> <v:polyline style="z-index:0;top:0; left:0;" points="11,17,11,19,13,19" /> <v:polyline style="z-index:0;top:0; left:0;" points="11,23,11,21,13,21" /> <v:polyline style="z-index:0;top:0; left:0;" points="69,17,69,19,67,19" /> <v:polyline style="z-index:0;top:0; left:0;" points="69,23,69,21,67,21" /> <v:polyline style="z-index:0;top:0; left:0;" points="71,17,71,19,73,19" /> <v:polyline style="z-index:0;top:0; left:0;" points="71,23,71,21,73,21" /> <v:polyline style="z-index:0;top:0; left:0;" points="1,27,1,29,3,29" /> <v:polyline style="z-index:0;top:0; left:0;" points="1,33,1,31,3,31" /> <v:polyline style="z-index:0;top:0; left:0;" points="19,27,19,29,17,29" /> <v:polyline style="z-index:0;top:0; left:0;" points="19,33,19,31,17,31" /> <v:polyline style="z-index:0;top:0; left:0;" points="21,27,21,29,23,29" /> <v:polyline style="z-index:0;top:0; left:0;" points="21,33,21,31,23,31" /> <v:polyline style="z-index:0;top:0; left:0;" points="39,27,39,29,37,29" /> <v:polyline style="z-index:0;top:0; left:0;" points="39,33,39,31,37,31" /> <v:polyline style="z-index:0;top:0; left:0;" points="41,27,41,29,43,29" /> <v:polyline style="z-index:0;top:0; left:0;" points="41,33,41,31,43,31" /> <v:polyline style="z-index:0;top:0; left:0;" points="59,27,59,29,57,29" /> <v:polyline style="z-index:0;top:0; left:0;" points="59,33,59,31,57,31" /> <v:polyline style="z-index:0;top:0; left:0;" points="61,27,61,29,63,29" /> <v:polyline style="z-index:0;top:0; left:0;" points="61,33,61,31,63,31" /> <v:polyline style="z-index:0;top:0; left:0;" points="79,27,79,29,77,29" /> <v:polyline style="z-index:0;top:0; left:0;" points="79,33,79,31,77,31" />  <v:polyline style="z-index:0;top:0; left:0;" points="9,67,9,69,7,69" /> <v:polyline style="z-index:0;top:0; left:0;" points="9,73,9,71,7,71" /> <v:polyline style="z-index:0;top:0; left:0;" points="11,67,11,69,13,69" /> <v:polyline style="z-index:0;top:0; left:0;" points="11,73,11,71,13,71" /> <v:polyline style="z-index:0;top:0; left:0;" points="69,67,69,69,67,69" /> <v:polyline style="z-index:0;top:0; left:0;" points="69,73,69,71,67,71" /> <v:polyline style="z-index:0;top:0; left:0;" points="71,67,71,69,73,69" /> <v:polyline style="z-index:0;top:0; left:0;" points="71,73,71,71,73,71" /> <v:polyline style="z-index:0;top:0; left:0;" points="1,57,1,59,3,59" /> <v:polyline style="z-index:0;top:0; left:0;" points="1,63,1,61,3,61" /> <v:polyline style="z-index:0;top:0; left:0;" points="19,57,19,59,17,59" /> <v:polyline style="z-index:0;top:0; left:0;" points="19,63,19,61,17,61" /> <v:polyline style="z-index:0;top:0; left:0;" points="21,57,21,59,23,59" /> <v:polyline style="z-index:0;top:0; left:0;" points="21,63,21,61,23,61" /> <v:polyline style="z-index:0;top:0; left:0;" points="39,57,39,59,37,59" /> <v:polyline style="z-index:0;top:0; left:0;" points="39,63,39,61,37,61" /> <v:polyline style="z-index:0;top:0; left:0;" points="41,57,41,59,43,59" /> <v:polyline style="z-index:0;top:0; left:0;" points="41,63,41,61,43,61" /> <v:polyline style="z-index:0;top:0; left:0;" points="59,57,59,59,57,59" /> <v:polyline style="z-index:0;top:0; left:0;" points="59,63,59,61,57,61" /> <v:polyline style="z-index:0;top:0; left:0;" points="61,57,61,59,63,59" /> <v:polyline style="z-index:0;top:0; left:0;" points="61,63,61,61,63,61" /> <v:polyline style="z-index:0;top:0; left:0;" points="79,57,79,59,77,59" /> <v:polyline style="z-index:0;top:0; left:0;" points="79,63,79,61,77,61" />  <v:oval style="z-index:2;width:6;height:6;z-index:2;left:-2;top:-2;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >车</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:7;top:-2;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >马</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:17;top:-2;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >相</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:27;top:-2;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >仕</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:37;top:-2;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >将</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:47;top:-2;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >仕</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:57;top:-2;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >相</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:67;top:-2;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >马</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:77;top:-2;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >车</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:67;top:17;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >炮</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:17;top:17;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >炮</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:-2;top:27;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >兵</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:17;top:37;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >兵</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:37;top:27;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >兵</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:57;top:27;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >兵</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:77;top:27;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow" >兵</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval>  <v:oval style="width:6;height:6;z-index:2;left:-2;top:87;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >车</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:7;top:87;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >马</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:17;top:87;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >象</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:27;top:87;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >仕</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:37;top:87;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >帅</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:47;top:87;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >仕</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:57;top:87;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >象</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:67;top:87;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >马</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:77;top:87;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >车</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:67;top:67;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >炮</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:7;top:67;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >炮</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:-2;top:57;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >卒</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:17;top:57;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >卒</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:37;top:57;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >卒</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:57;top:57;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >卒</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:oval style="width:6;height:6;z-index:2;left:77;top:57;" > <v:stroke color="#ddd"/> <v:fill color="#fff"/> <v:textbox inset="5px,8px,5px,0" class="fontshadow2" >卒</v:textbox> <v:extrusion on="t" backdepth="5px" color="#fff" rotati diffusity="1.1"/> </v:oval> <v:group> </div> </body> </html>
提示：您可以先修改部分代码再运行

[[i] 本帖最后由 lanerye 于 2007-9-29 11:52 编辑 [/i]]

[ 本帖最后由 lanerye 于 2008-7-9 12:06 编辑 ]

作者: lanerye 发布时间: 2007-09-29

佩服一下……
3天就这么厉害了. 不过那个“汉界”…… 俩字还不如不反过来得好...
不好意思，vml 偶不熟，你的问题只好等其他大大帮你解决了……

作者: ※潇洒※ 发布时间: 2007-10-14

感觉还是学JS好,VML还是无法实现动态效果.

下面是新出的作品,仿别人的,但是和别人的不一样.
点下面的标题,都可以把列表显示出来.
因为JS 不很熟练,做了两天才弄出来.
鼓励一下自己啊``,哈哈哈
<html xmlns:v> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>VML实例01</title> <STYLE> v\:*{behavior:url(#default#VML);} body,table{ margin:0; padding:0; font:12px/150% 宋体; } .xy{ z-index:0; } .Yword{ POSITION:absolute; Z-INDEX:1; width:30px; font-size:12px; text-align:right; height:15px; border-bottom:#000 1px solid; } .Xunit{ POSITION:absolute; Z-INDEX:1; left:30; top:0; width:100; height:100; } </STYLE> </head> <body > <div style="z-index:-2;width:900px;height:460px;border:solid #ddd 1px; background:#f1f1f1">  <div style="z-index:-2;float:right;top:20px;width:135px;height:450px;padding:50px 2px 0 5px; background:#fff"> CRM综合查询系统<br/>07年9月<br/> 分公司服务数据统计图<br/><br/> <font color=red >说明介绍:</font></br> <span style='font-size:9px;color:#f8bc19;font-family:webdings;' >g</span> 热线电话</br> <span style='font-size:9px;color:#29a7ff;font-family:webdings;' >g</span> 上门服务</br> <span style='font-size:9px;color:#fe0202;font-family:webdings;' >g</span> 回访客户</br> </div>  <v:group style="POSITION:absolute;Z-INDEX:1;left:10;width:100;height:100;" coordsize="120,120" > <v:rect style="POSITION:absolute;z-index:5;LEFT:500;TOP:30px;width:320;height:30;" filled="f" stroked="f"> <v:Textbox style="font-size:12px;font:15px;18px 黑体;color:#FF0000; ">请点击下方表格头部，既可显示数据统计图</v:Textbox > </v:rect> <v:rect style="POSITION:absolute;Z-INDEX:0;LEFT:10px;TOP:10px;width:880;height:530;" fillcolor="#fff" stroked="f"> <v:fill angle=150 type='gradient' color2="yellow"/> </v:rect> <v:line from="50 500" to="750 500"style=" Z-INDEX:0"> <v:stroke EndArrow="Classic"/> <v:rect style="POSITION:absolute;LEFT:720px;TOP:0;width:60;height:30;" filled="f" stroked="f"> <v:Textbox style="font-size:12px;">各分公司</v:Textbox > </v:rect> </v:line >  <v:line from="50 500" to="50 50" class="xy" > <v:stroke EndArrow="Classic"/> <v:rect style="POSITION:absolute;LEFT:-30;TOP:-20px;;width:160;height:30;" filled="f" stroked="f"> <v:Textbox style="font-size:12px; ">数量 (单位:人次)</v:Textbox > </v:rect> </v:line >  <v:group style="POSITION:absolute;Z-INDEX:1;left:52;width:100;height:100;" coordsize="100,100" > <v:line from="0,00" to="660,0" style="top:450;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:400;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:350;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:300;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:250;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:200;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:150;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:100;" strokecolor="#ddd" /> </v:group>  <v:group style="POSITION:absolute;Z-INDEX:1;left:20;top:-14;width:100;height:100;" coordsize="100,100" > <v:rect contentEditable="true" filled="f" stroked="f" style='top:100;'class="Yword" >400</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:150;'class="Yword" >350</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:200;'class="Yword" >300</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:250;'class="Yword" >250</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:300;'class="Yword" >200</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:350;'class="Yword" >150</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:400;'class="Yword" >100</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:450;'class="Yword" >50</v:rect> </v:group>  <div id="divshow"> <script> var divin=document.getElementById("divshow"); divin.innerHTML="" function show(Xnum){ divin.innerHTML="" var obj="" var tab = document.getElementById("TableName"); for (var i = 1 ;i<tab.rows.length ; i ++){ obj=new newobj("xname"+i,i*70,"rname"+i,500-tab.rows[i].cells[Xnum].innerHTML,tab.rows[i].cells[Xnum].innerHTML,tab.rows[i].cells[0].innerHTML); } } function newobj(Oid,Oleft,Rid,Otop,Oheight,Oname){ this.Oid = Oid; this.Oleft = Oleft; this.Rid = Rid; this.Otop = Otop; this.Oheight = Oheight; this.Oname = Oname; this.bulid = bulid; this.bulid(); } function bulid(){ var strshow= '<v:group id="' + this.Oid + '" style="left:' + this.Oleft +';" coordsize="100,100" class="Xunit">' + '<v:rect id="' + this.Rid + '" style="LEFT:70px;TOP:' + this.Otop + ' ;width:20;height:' + this.Oheight + ';" fillcolor="#29a7ff" stroked="f">' + '<v:div style="top: -20 px;POSITION:absolute;" >' + this.Oheight + '</v:div > ' + '</v:rect> ' + '<v:rect style="LEFT:50px;TOP:500px;width:100;height:30;" filled="f" stroked="f">' + '<v:Textbox style="font-size:12px;">' + this.Oname + '</v:Textbox > ' + '</v:rect> ' + '</v:group > ' ; divin.innerHTML+=strshow; } </script> </div> </v:group> </div><br> <TABLE width="500" height="225" border=0 cellPadding=1 cellSpacing=1 bgcolor="#CCCCCC" id="TableName" align="center" > <TR bgcolor="#FFFFFF" > <td height="25" >部门</td> <td height="25" > <a href="javascript:void(0);" onclick="show(1);" >热线电话</a></td> <td height="25" ><a href="javascript:void(1);" onclick="show(2);" >上门服务量</a></td> <td height="25" ><a href="javascript:void(2);" onclick="show(3);" >回访量</a></td> </TR> <TR bgcolor="#FFFFFF" > <td height="25">郑州</td> <td>160</td> <td>120</td> <td>245</td> </TR> <TR bgcolor="#FFFFFF" > <td height="25">安阳</td> <td>252</td> <td>152</td> <td>152</td> </TR> <TR bgcolor="#FFFFFF" > <td height="25">新乡</td> <td>125</td> <td>215</td> <td>254</td> </tr> <tr bgcolor="#FFFFFF" > <td height="25">许昌</td> <td>254</td> <td>141</td> <td>262</td> </tr> <tr bgcolor="#FFFFFF" > <td height="25">信阳</td> <td>268</td> <td>252</td> <td>242</td> </tr> <tr bgcolor="#FFFFFF" > <td height="25">南阳</td> <td>395</td> <td>381</td> <td>151</td> </tr> <tr bgcolor="#FFFFFF" > <td height="25">开封</td> <td>250</td> <td>135</td> <td>126</td> </tr> <tr bgcolor="#FFFFFF" > <td height="25">洛阳</td> <td>112</td> <td>198</td> <td>196</td> </tr> </table> </body> </html>
提示：您可以先修改部分代码再运行

[[i] 本帖最后由 lanerye 于 2007-10-23 12:27 编辑 [/i]]

作者: zzokki 发布时间: 2007-10-19

和上面的那个一样,点击一个表头名称,把数据显示出来.混合显示出来.
但是有点麻烦,没精力做啊,希望高手弄弄看.
<html xmlns:v> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>VML实例01</title> <STYLE> v\:*{behavior:url(#default#VML);} body{ margin:0; padding:0; font:12px/150% 宋体; } .xy{ z-index:0; } .Yword{ POSITION:absolute; Z-INDEX:1; width:30px; font-size:12px; text-align:right; height:15px; border-bottom:#000 1px solid; } </STYLE> </head> <body > <div style="z-index:-2;width:1000px;height:550px;border:solid #ddd 1px; background:#f1f1f1">  <div style="z-index:-2;float:right;top:20px;left:950px; width:100px;height:550px;padding:50px 2px 0 5px; background:#fff"> CRM综合查询系统<br/>&#132007年9月<br/> 分公司服务数据统计图<br/><br/> <font color=red >说明介绍:</font></br> <span style='font-size:9px;color:#f8bc19;font-family:webdings;' >g</span> 热线电话</br> <span style='font-size:9px;color:#29a7ff;font-family:webdings;' >g</span> 上门服务</br> <span style='font-size:9px;color:#fe0202;font-family:webdings;' >g</span> 回访客户</br> </div>  <v:rect style="POSITION:absolute;Z-INDEX:0;LEFT:10px;TOP:10px;width:880;height:530;" fillcolor="#fff" stroked="f"> <v:fill angle=150 type='gradient' color2="yellow"/> </v:rect> <v:line from="50 500" to="750 500"style=" Z-INDEX:0"> <v:stroke EndArrow="Classic"/> <v:rect style="POSITION:absolute;LEFT:720px;TOP:0;width:60;height:30;" filled="f" stroked="f"> <v:Textbox style="font-size:12px;">各分公司</v:Textbox > </v:rect> </v:line >  <v:line from="50 500" to="50 50" class="xy" > <v:stroke EndArrow="Classic"/> <v:rect style="POSITION:absolute;LEFT:-30;TOP:-20px;;width:160;height:30;" filled="f" stroked="f"> <v:Textbox style="font-size:12px; ">数量 (单位:人次)</v:Textbox > </v:rect> </v:line >  <v:group style="POSITION:absolute;Z-INDEX:1;left:52;width:100;height:100;" coordsize="100,100" > <v:line from="0,00" to="660,0" style="top:450;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:400;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:350;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:300;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:250;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:200;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:150;" strokecolor="#ddd" /> <v:line from="0,00" to="660,0" style="top:100;" strokecolor="#ddd" /> </v:group>  <v:group style="POSITION:absolute;Z-INDEX:1;left:20;top:-14;width:100;height:100;" coordsize="100,100" > <v:rect contentEditable="true" filled="f" stroked="f" style='top:100;'class="Yword" >400</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:150;'class="Yword" >350</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:200;'class="Yword" >300</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:250;'class="Yword" >250</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:300;'class="Yword" >200</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:350;'class="Yword" >150</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:400;'class="Yword" >100</v:rect> <v:rect contentEditable="true" filled="f" stroked="f" style='top:450;'class="Yword" >50</v:rect> </v:group>  <v:group style="POSITION:absolute;Z-INDEX:1;left:30;top:0;width:100;height:100;" coordsize="100,100" > <v:rect style="LEFT:60px;TOP:400px;width:10;height:100;" fillcolor="#f8bc19" stroked="f"/> <v:rect style="LEFT:70px;TOP:340px;width:10;height:160;" fillcolor="#29a7ff" stroked="f"/> <v:rect style="LEFT:80px;TOP:380px;width:10;height:120;" fillcolor="#fe0202" stroked="f"/> <v:rect style="LEFT:50px;TOP:500px;width:60;height:30;" filled="f" stroked="f"> <v:Textbox style="font-size:12px;">郑州</v:Textbox > </v:rect> </v:group > <v:group style="POSITION:absolute;Z-INDEX:1;left:90;top:0;width:100;height:100;" coordsize="100,100" > <v:rect style="LEFT:60px;TOP:400px;width:10;height:100;" fillcolor="#f8bc19" stroked="f"/> <v:rect style="LEFT:70px;TOP:340px;width:10;height:160;" fillcolor="#29a7ff" stroked="f"/> <v:rect style="LEFT:80px;TOP:380px;width:10;height:120;" fillcolor="#fe0202" stroked="f"/> <v:rect style="LEFT:50px;TOP:500px;width:60;height:30;" filled="f" stroked="f"> <v:Textbox style="font-size:12px;">安阳</v:Textbox > </v:rect> </v:group > <v:group style="POSITION:absolute;Z-INDEX:1;left:150;top:0;width:100;height:100;" coordsize="100,100" > <v:rect style="LEFT:60px;TOP:400px;width:10;height:100;" fillcolor="#f8bc19" stroked="f"/> <v:rect style="LEFT:70px;TOP:340px;width:10;height:160;" fillcolor="#29a7ff" stroked="f"/> <v:rect style="LEFT:80px;TOP:380px;width:10;height:120;" fillcolor="#fe0202" stroked="f"/> <v:rect style="LEFT:50px;TOP:500px;width:60;height:30;" filled="f" stroked="f"> <v:Textbox style="font-size:12px;">许昌</v:Textbox > </v:rect> </v:group > <v:group style="POSITION:absolute;Z-INDEX:1;left:210;top:0;width:100;height:100;" coordsize="100,100" > <v:rect style="LEFT:60px;TOP:400px;width:10;height:100;" fillcolor="#f8bc19" stroked="f"/> <v:rect style="LEFT:70px;TOP:340px;width:10;height:160;" fillcolor="#29a7ff" stroked="f"/> <v:rect style="LEFT:80px;TOP:380px;width:10;height:120;" fillcolor="#fe0202" stroked="f"/> <v:rect style="LEFT:50px;TOP:500px;width:60;height:30;" filled="f" stroked="f"> <v:Textbox style="font-size:12px;">信阳</v:Textbox > </v:rect> </v:group > </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: lanerye 发布时间: 2007-10-23

有没有画股票大盘走式图的,我想看看是怎么个搞的?

作者: lanerye 发布时间: 2007-10-23