<HTML><HEAD><TITLE>多级右键菜单 - 51windows.Net</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>BODY {
FONT-SIZE: 12px;
}
.info{FONT-SIZE: 14px;color:#FFFFFF;font-family:@Tahoma,@宋体;width:20px}
TABLE {
CURSOR: default; FONT-SIZE: 12px; MARGIN: 0px
}
TR {
HEIGHT: 20px
}
TR.over {
BACKGROUND-COLOR: #000080; COLOR: #ffffff; CURSOR: default; FONT-SIZE: 12px
}
TR.out {
BACKGROUND-COLOR: #efefef; COLOR: #000000; FONT-SIZE: 12px
}
DIV.rm_div {
BACKGROUND-COLOR: #efefef; BORDER-BOTTOM: #ffffff 1px outset; BORDER-LEFT: #ffffff 1px outset; BORDER-RIGHT: #ffffff 1px outset; BORDER-TOP: #ffffff 1px outset; DISPLAY: none; FILTER: Alpha(Opacity='95'); HEIGHT: 0px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; POSITION: absolute; WIDTH: 0px
}
HR.sperator {
BORDER-BOTTOM: #ffffff 1px inset; BORDER-LEFT: #ffffff 1px inset; BORDER-RIGHT: #ffffff 1px inset; BORDER-TOP: #ffffff 1px inset; WIDTH: 95%
}
.w2kfont {
FONT-FAMILY: Tahoma; FONT-SIZE: 8pt
}
</STYLE>

解决方案 »

  1.   

    <SCRIPT language=JScript>
    <!--
    //此代码由51windows.net收集,做少量更改。
      function RightMenu()
      {
        this.AddExtendMenu=AddExtendMenu;
        this.AddItem=AddItem;
        this.GetMenu=GetMenu;
        this.HideAll=HideAll;
        this.I_OnMouseOver=I_OnMouseOver;
        this.I_OnMouseOut=I_OnMouseOut;
        this.I_OnMouseUp=I_OnMouseUp;
        this.P_OnMouseOver=P_OnMouseOver;
        this.P_OnMouseOut=P_OnMouseOut;
        A_rbpm = new Array();
        HTMLstr  = "";
        HTMLstr += "<!-- RightButton PopMenu -->\n";
        HTMLstr += "\n";
        HTMLstr += "<!-- PopMenu Starts -->\n";
        HTMLstr += "<div id='E_rbpm' class='rm_div'>\n";
                            // rbpm = right button pop menu
        HTMLstr += "<table width='100%' border='0' cellspacing='0'>\n";
        HTMLstr += "<tr><td height='264' width='20' valign='bottom'  bgcolor='#000000' onclick=window.event.cancelBubble=true; class=info>作制娃海<br>:<br>窗视忧无\n";
        HTMLstr += "</td><td height='264' width='120' style='padding: 1' valign='bottom'>\n";
        HTMLstr += "<table width='100%' border='0' cellspacing='0'>\n";
        HTMLstr += "<!-- Insert A Extend Menu or Item On Here For E_rbpm -->\n";
        HTMLstr += "</table></td></tr></table>\n";
        HTMLstr += "</div>\n";
        HTMLstr += "<!-- Insert A Extend_Menu Area on Here For E_rbpm -->";
        HTMLstr += "\n";
        HTMLstr += "<!-- PopMenu Ends -->\n";
      }
      function AddExtendMenu(id,img,wh,name,parent)
      {
        var TempStr = "";    eval("A_"+parent+".length++");
        eval("A_"+parent+"[A_"+parent+".length-1] = id");  // 将此项注册到父菜单项的ID数组中去
        TempStr += "<div id='E_"+id+"' class='rm_div'>\n";
        TempStr += "<table width='100%' border='0' cellspacing='0'>\n";
        TempStr += "<!-- Insert A Extend Menu or Item On Here For E_"+id+" -->";
        TempStr += "</table>\n";
        TempStr += "</div>\n";
        TempStr += "<!-- Insert A Extend_Menu Area on Here For E_"+id+" -->";
        TempStr += "<!-- Insert A Extend_Menu Area on Here For E_"+parent+" -->";
        HTMLstr = HTMLstr.replace("<!-- Insert A Extend_Menu Area on Here For E_"+parent+" -->",TempStr);
        
        eval("A_"+id+" = new Array()");
        TempStr  = "";
        TempStr += "<!-- Extend Item : P_"+id+" -->\n";
        TempStr += "<tr id='P_"+id+"' class='out'";
        TempStr += " onmouseover='P_OnMouseOver(\""+id+"\",\""+parent+"\")'";
        TempStr += " onmouseout='P_OnMouseOut(\""+id+"\",\""+parent+"\")'";
        TempStr += " onmouseup=window.event.cancelBubble=true;";
        TempStr += " onclick=window.event.cancelBubble=true;";
        TempStr += "><td nowrap>";
        TempStr += "<font face='Wingdings' style='font-size:18px'>0</font> "+name+"  </td><td style='font-family: webdings; text-align: ;'>4";
        TempStr += "</td></tr>\n";
        TempStr += "<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->";
        HTMLstr = HTMLstr.replace("<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",TempStr);
      }
      function AddItem(id,img,wh,name,parent,location)
      {
        var TempStr = "";
        var ItemStr = "<!-- ITEM : I_"+id+" -->";
        if(id == "sperator")
        {
          TempStr += ItemStr+"\n";
          TempStr += "<tr class='out' onclick='window.event.cancelBubble=true;' onmouseup='window.event.cancelBubble=true;'><td colspan='2' height='1'><hr class='sperator'></td></tr>";
          TempStr += "<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->";
          HTMLstr = HTMLstr.replace("<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",TempStr);
          return;
        }
        if(HTMLstr.indexOf(ItemStr) != -1)
        {
          alert("I_"+id+"already exist!");
          return;
        }
        TempStr += ItemStr+"\n";
        TempStr += "<tr id='I_"+id+"' class='out'";
        TempStr += " onmouseover='I_OnMouseOver(\""+id+"\",\""+parent+"\")'";
        TempStr += " onmouseout='I_OnMouseOut(\""+id+"\")'";
        TempStr += " onclick='window.event.cancelBubble=true;'";
        if(location == null)
          TempStr += " onmouseup='I_OnMouseUp(\""+id+"\",\""+parent+"\",null)'";
        else
          TempStr += " onmouseup='I_OnMouseUp(\""+id+"\",\""+parent+"\",\""+location+"\")'";
        TempStr += "><td nowrap>";
        TempStr +="<font face='Wingdings' style='font-size:18px'>"+wh+"</font> "+ name+" ";//以Wingdings字体做为图片,要改成图片,请在这里更改
        TempStr += "</td><td></td></tr>\n";
        TempStr += "<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->";
        HTMLstr = HTMLstr.replace("<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",TempStr);
      }
      function GetMenu()
      {
        return HTMLstr;
      }
      function I_OnMouseOver(id,parent)
      {
        var Item;
        if(parent != "rbpm")
        {
          var ParentItem;
          ParentItem = eval("P_"+parent);
          ParentItem.className="over";
        }
        Item = eval("I_"+id);
        Item.className="over";
        HideAll(parent,1);
      }
      function I_OnMouseOut(id)
      {
        var Item;
        Item = eval("I_"+id);
        Item.className="out";
      }
      function I_OnMouseUp(id,parent,location)
      {
        var ParentMenu;
        window.event.cancelBubble=true;
        OnClick();
        ParentMenu = eval("E_"+parent);
        ParentMenu.display="none";
        if(location == null)
          eval("Do_"+id+"()");
        else
          window.open(location);
      }
      function P_OnMouseOver(id,parent)
      {
        var Item;
        var Extend;
        var Parent;
        if(parent != "rbpm")
        {
          var ParentItem;
          ParentItem = eval("P_"+parent);
          ParentItem.className="over";
        }
        HideAll(parent,1);
        Item = eval("P_"+id);
        Extend = eval("E_"+id);
        Parent = eval("E_"+parent);
        Item.className="over";
        Extend.style.display="block";
        Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth-4;
        if(Extend.style.posLeft+Extend.offsetWidth > document.body.scrollLeft+document.body.clientWidth)
            Extend.style.posLeft=Extend.style.posLeft-Parent.offsetWidth-Extend.offsetWidth+8;
        if(Extend.style.posLeft < 0) Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth;
        Extend.style.posTop=Parent.offsetTop+Item.offsetTop+1;
        if(Extend.style.posTop+Extend.offsetHeight > document.body.scrollTop+document.body.clientHeight)
          Extend.style.posTop=document.body.scrollTop+document.body.clientHeight-Extend.offsetHeight;
        if(Extend.style.posTop < 0) Extend.style.posTop=0;
      }
      function P_OnMouseOut(id,parent)
      {
      }
      function HideAll(id,flag)
      {
        var Area;
        var Temp;
        var i;
        if(!flag)
        {
          Temp = eval("E_"+id);
          Temp.style.display="none";
        }
        Area = eval("A_"+id);
        if(Area.length)
        {
          for(i=0; i < Area.length; i++)
          {
            HideAll(Area[i],0);
            Temp = eval("E_"+Area[i]);
            Temp.style.display="none";
            Temp = eval("P_"+Area[i]);
            Temp.className="out";
          }
        }
      }
      

  2.   

    document.onmouseup=OnMouseUp;
      document.onclick=OnClick;
      function OnMouseUp()
      {
        if(window.event.button == 2)
        {
          var PopMenu;
          PopMenu = eval("E_rbpm");
          HideAll("rbpm",0);
          PopMenu.style.display="block";
          PopMenu.style.posLeft=document.body.scrollLeft+window.event.clientX;
          PopMenu.style.posTop=document.body.scrollTop+window.event.clientY;
          if(PopMenu.style.posLeft+PopMenu.offsetWidth > document.body.scrollLeft+document.body.clientWidth)
            PopMenu.style.posLeft=document.body.scrollLeft+document.body.clientWidth-PopMenu.offsetWidth;
          if(PopMenu.style.posLeft < 0) PopMenu.style.posLeft=0;
          if(PopMenu.style.posTop+PopMenu.offsetHeight > document.body.scrollTop+document.body.clientHeight)
            PopMenu.style.posTop=document.body.scrollTop+document.body.clientHeight-PopMenu.offsetHeight;
          if(PopMenu.style.posTop < 0) PopMenu.style.posTop=0;
        }
      }
      function OnClick()
      {
        HideAll("rbpm",0);
      }
      // Add Your Function on following
      function Do_viewcode(){window.location="view-source:"+window.location.href;}
      function Do_help(){window.showHelp(window.location);}
      function Do_exit() {window.close();}
      function Do_refresh() {window.location.reload();}
      function Do_back() {history.back();}
      function Do_forward() {history.forward();}
    function Do_help(){alert("帮助")}
      -->
      </SCRIPT>
    <META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD>
    <BODY bgColor=#336699 oncontextmenu=window.event.returnValue=false>
    <DIV id=snwcwt> 请点击右键</DIV>
    <SCRIPT language=JScript>
      <!--
      var menu = new RightMenu();
    menu.AddItem("update","start_update","4","<font class=w2kfont>Web Update</font>","rbpm","http://www.51windows.net/");
    menu.AddItem("suan","suan","a","大蒜之乡","rbpm","http://www.51windows.net");
    menu.AddItem("sperator","","","","rbpm",null);
    menu.AddExtendMenu("program","start_pro","24","程序<font class=w2kfont>(<u>P</u>)</font>","rbpm",null);
    menu.AddExtendMenu("p_acc","folder","+","附件","program",null);
    menu.AddItem("p_acc1","html","+","<font class=w2kfont>Microsoft FrontPage 2000</font>","program","51w/game/");
    menu.AddItem("p_acc2","html","+","<font class=w2kfont>Norton AntiVirus Corporate Edition</font>","program","http://www.51windows.net");
    menu.AddExtendMenu("p_lgame","folder","16","小游戏","p_acc",null);
    menu.AddItem("p_game1","folder","+","扫雷","p_lgame","http://www.51windows.net/game/");
    menu.AddItem("p_game2","folder","+","超级玛力","p_lgame","http://www.51windows.net/game/");
    menu.AddItem("p_game3","folder","+","五子棋","p_lgame","http://www.51windows.net/game/");
    menu.AddItem("p_game4","folder","+","俄罗斯方块","p_lgame","http://www.51windows.net/game/");
    menu.AddExtendMenu("doc","start_doc","24","文档<font class=w2kfont>(<u>D</u>)</font>","rbpm",null);
    menu.AddItem("d_photo","folder","+","我的邮票","doc",null);
    menu.AddExtendMenu("fav","start_fav","24","收藏<font class=w2kfont>(<u>A</u>)</font>","rbpm",null);
    menu.AddExtendMenu("f_bbs","folder","16","论坛","fav",null);
    menu.AddItem("f_bbs1","html","+","蓝色理想","f_bbs","http://www.blueidea.com/bbs/");
    menu.AddItem("f_bbs2","html","+","无忧脚本","f_bbs","http://www.51js.com/");
    menu.AddItem("f_bbs3","html","+","CSDN专家门诊","f_bbs","http://www.csdn.net/");
    menu.AddItem("f_bbs4","html","+","洪恩在线网上交流","f_bbs","http://www.51windows.net");
    menu.AddExtendMenu("f_webpage","folder","16","网页制作","fav",null);
    menu.AddItem("f_webpage1","html","","<font disabled>(空)</font>","f_webpage","http://www.51windows.net");
    menu.AddExtendMenu("f_study","folder","16","网上学习","fav",null);
    menu.AddItem("f_s1","html","","<font disabled>(空)</font>","f_study","http://matrix.hongen.com/forum/");
    menu.AddExtendMenu("f_link","folder","16","友情链接","fav",null);
    menu.AddItem("f_link1","html","+","无忧视窗","f_link","http://www.51windows.net");
    menu.AddExtendMenu("setting","start_set","24","设置<font class=w2kfont>(<u>S</u>)</font>","rbpm",null);
    menu.AddItem("s_panel","folder","+","控制面板(C)","setting","http://www.51windows.net");
    menu.AddItem("sperator","","","","setting",null);
    menu.AddItem("s_data","s_user","+","用户资料(D)","setting","http://www.51windows.net");
    menu.AddItem("s_display1","s_taskbar","+","任务栏和开始菜单(T)","setting","http://www.51windows.net");
    menu.AddExtendMenu("find","start_find","24","查找<font class=w2kfont>(<u>F</u>)","rbpm",null);
    menu.AddItem("l_search","search","4","文件或文件夹上(<u>F</u>)...","find","http://www.51windows.net");
    menu.AddItem("i_search","esearch","4","在Internet上(<u>I</u>)...","find","http://www.51windows.net");
    menu.AddItem("u_search","f_user","4","用户(<u>P</u>)...","find","http://www.51windows.net");
    menu.AddItem("help","start_help","V","&nbsp;帮助<font class=w2kfont>(<u>H</u>)</font>","rbpm",null);
    menu.AddItem("sperator","","","","rbpm",null);
    menu.AddItem("logoff","start_logoff","v","&nbsp;注销<font class=w2kfont>(<u>L</u>)</font>","rbpm",null);
    menu.AddItem("shut","start_shut","x","退出<font class=w2kfont>(<u>U</u>)</font>","rbpm",null);
    document.writeln(menu.GetMenu());
    -->
    </SCRIPT>
    </TD></TR>
    </TABLE>
    </BODY>
    </HTML>将以上代码连接起来
      

  3.   

    我手头上好像也有一个:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <meta http-equiv="content-type" content="text/html" charset="GB2312">
    <link rel="stylesheet" type="text/css" href="">
    <script type="text/javascript" src=""></script>
    <script language="javascript" type="text/javascript"></script>
    </HEAD><BODY>
    <script language="JavaScript1.2">
    <!--/*
    Context Menu script II (By Dheera Venkatraman at [email protected])
    Submitted to Dynamic Drive to feature script in archive
    For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
    */var isie=0;
    if(window.navigator.appName=="Microsoft Internet Explorer"&&window.navigator.appVersion.substring(window.navigator.appVersion.indexOf("MSIE")+5,window.navigator.appVersion.indexOf("MSIE")+8)>=5.5) {
    isie=1;
    }
    else {
    isie=0;
    }
    if(isie) {
    var html="";
    html+='<TABLE STYLE="border:1pt solid #808080" BGCOLOR="#CCCCCC" WIDTH="140" HEIGHT="220" CELLPADDING="0" CELLSPACING="1">';
    html+='<ST'+'YLE TYPE="text/css">\n';
    html+='a:link {text-decoration:none;font-family:Arial;font-size:8pt;}\n';
    html+='a:visited {text-decoration:none;font-family:Arial;font-size:8pt;}\n';
    html+='td {font-size:8pt;}\n';
    html+='</ST'+'YLE>\n';
    html+='<SC'+'RIPT LANGUAGE="JavaScript">\n';
    html+='\n<'+'!--\n';
    html+='window.onerror=null;\n';
    html+='/'+' -'+'->\n';
    html+='</'+'SCRIPT>\n';
    html+='<TR><TD STYLE="border:1pt solid #CCCCCC" ID="i0" ONMOUSEOVER="document.all.i0.style.background=\'#CFD6E8\';document.all.i0.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i0.style.background=\'#CCCCCC\';document.all.i0.style.border=\'1pt solid #CCCCCC\';" ONCLICK="window.history.go(-1);">&nbsp;<IMG SRC="menu/menuback.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Back</TD></TR>';html+='<TR><TD STYLE="border:1pt solid #CCCCCC" ID="i1" ONMOUSEOVER="document.all.i1.style.background=\'#CFD6E8\';document.all.i1.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i1.style.background=\'#CCCCCC\';document.all.i1.style.border=\'1pt solid #CCCCCC\';" ONCLICK="window.history.go(1);">&nbsp;<IMG SRC="menu/menuforward.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Forward</TD></TR>';html+='<TR><TD STYLE="border:1pt solid #CCCCCC"><IMG SRC="menu/pixel.gif" WIDTH="130" HEIGHT="1"></TD></TR>';html+='<TR><TD STYLE="border:1pt solid #CCCCCC" ID="i4" ONMOUSEOVER="document.all.i4.style.background=\'#CFD6E8\';document.all.i4.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i4.style.background=\'#CCCCCC\';document.all.i4.style.border=\'1pt solid #CCCCCC\';" ONCLICK="window.parent.external.AddFavorite(window.top.location.href,window.top.document.title);">&nbsp;<IMG SRC="menu/menufavorite.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Add to Favorites...</TD></TR>';html+='<TR><TD STYLE="border:1pt solid #CCCCCC" ID="i5" ONMOUSEOVER="document.all.i5.style.background=\'#CFD6E8\';document.all.i5.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i5.style.background=\'#CCCCCC\';document.all.i5.style.border=\'1pt solid #CCCCCC\';" ONCLICK="window.parent.location=\'view-source:\'+window.parent.location.href;">&nbsp;<IMG SRC="menu/menusource.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;View Source</TD></TR>';html+='<TR><TD STYLE="border:1pt solid #CCCCCC"><IMG SRC="menu/pixel.gif" WIDTH="130" HEIGHT="1"></TD></TR>';html+='<TR><TD STYLE="border:1pt solid #CCCCCC" ID="i6" ONMOUSEOVER="document.all.i6.style.background=\'#CFD6E8\';document.all.i6.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i6.style.background=\'#CCCCCC\';document.all.i6.style.border=\'1pt solid #CCCCCC\';" ONCLICK="window.print();">&nbsp;<IMG SRC="menu/menuprint.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Print</TD></TR>';html+='<TR><TD STYLE="border:1pt solid #CCCCCC" ID="i7" ONMOUSEOVER="document.all.i7.style.background=\'#CFD6E8\';document.all.i7.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i7.style.background=\'#CCCCCC\';document.all.i7.style.border=\'1pt solid #CCCCCC\';" ONCLICK="window.parent.location.href=window.parent.location.href;">&nbsp;<IMG SRC="menu/menurefresh.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Refresh</TD></TR>';html+='<TR><TD STYLE="border:1pt solid #CCCCCC"><IMG SRC="menu/pixel.gif" WIDTH="130" HEIGHT="1"></TD></TR>';html+='<TR><TD STYLE="border:1pt solid #CCCCCC" ID="i8" ONMOUSEOVER="document.all.i8.style.background=\'#CFD6E8\';document.all.i8.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i8.style.background=\'#CCCCCC\';document.all.i8.style.border=\'1pt solid #CCCCCC\';" ONCLICK="if(window.parent.document.body.style.zoom!=0) window.parent.document.body.style.zoom*=1.6; else window.parent.document.body.style.zoom=1.6;">&nbsp;<IMG SRC="menu/menuzoom.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Zoom In</TD></TR>';html+='<TR><TD STYLE="border:1pt solid #CCCCCC" ID="i9" ONMOUSEOVER="document.all.i9.style.background=\'#CFD6E8\';document.all.i9.style.border=\'1pt solid #737B92\';" ONMOUSEOUT="document.all.i9.style.background=\'#CCCCCC\';document.all.i9.style.border=\'1pt solid #CCCCCC\';" ONCLICK="if(window.parent.document.body.style.zoom!=0) window.parent.document.body.style.zoom*=0.625; else window.parent.document.body.style.zoom=0.625;">&nbsp;<IMG SRC="menu/menuzoom.gif" WIDTH="12" HEIGHT="12" BORDER="0" HSPACE="0" VSPACE="0" ALIGN="absmiddle">&nbsp;Zoom Out</TD></TR>';html+='</TABLE>';var oPopup = window.createPopup();}function dopopup(x,y) {
    if(isie) {
    var oPopupBody = oPopup.document.body;
    oPopupBody.innerHTML = html;
    oPopup.show(x, y, 140, 220, document.body);
    }
    }function click(e) {
    if(isie) {
    if(document.all) {
    if(event.button==2||event.button==3) {
    dopopup(event.x-1,event.y-1);
    }
    }
    }
    }if(isie) {
    document.oncontextmenu = function() { dopopup(event.x,event.y);return false; }
    document.onmousedown = click;
    }
    // --> 
    </script>
    </BODY>
    </HTML>
      

  4.   

    http://code.seolm.com/cc/Code_Vml/20060126/01/
    给楼主参考。基于vml的。