0顶

模拟office2000工具条

稿源：互联网 2022-04-02 21:42:25 点击： 811 撤稿纠错

仿office2000工具条效果，通过js+css来实现。

以下讨论的是和模拟相关的模拟office2000工具条教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 仿Office 2003的工具条 站长特效网</title>
<script>
  var listnum=0;
  var menu_height;
  var menu_width;
  var menu_left;
  var menu_top;
  var topMar = 1;
  var leftMar = -2;
  var space = 1;
  var isvisible;
function listbox(listname,buttonname,valuename)
  {//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  this.listname=listname
  this.buttonname=buttonname
  this.valuename=valuename
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很 好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function listaction(obj,action,showlist,scroll,tw)
  {
  num=obj.id.charAt(obj.id.length-1)
  if (!scroll) {scroll=0}
  if (!tw) {tw=105}
  listbox=eval(lb[num].listname)
  listbutton=eval(lb[num].buttonname)
  listvalue=eval(lb[num].valuename)
  switch (action)
  {//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特 效，本站收集大量高质量js代码，还有许多广告代码下载。
  case 0:
  listbox.className="getlist";listbutton.className="listover"
  break;
  case 1:
  if (listbox.gf=="0")
  {listbox.className="lostlist";listbutton.className="menubar"}
  break;
  case 2:
  for (i=0;i<lb.length;i++)
  {//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还 有许多广告代码下载。
  if (num!=i.toString()){
  nlistbox=eval(lb[i].listname)
  nlistbutton=eval(lb[i].buttonname)
  nlistvalue=eval(lb[i].valuename)
  nlistbox.className="lostlist";nlistbutton.className="menubar"
  nlistbox.gf="0"
  }
  }
  ShowMenu(listbox,showlist,tw,scroll);listbox.className="getlist";listbox.gf="1"
  listnum=num;
  break;
  }
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特 效，本站收集大量高质量js代码，还有许多广告代码下载。
function HideMenu()
  {
  var mX;
  var mY;
  var vDiv;
  var mDiv;
  if (isvisible == true)
  {
  vDiv = document.all("listDiv");
  mX = window.event.clientX + document.body.scrollLeft;
  mY = window.event.clientY + document.body.scrollTop;
  if ((mX < parseInt(vDiv.style.left)) || (mX > parseInt(vDiv.style.left)+vDiv.offsetWidth) ||
  (mY < parseInt(vDiv.style.top)-menu_height) || (mY > parseInt(vDiv.style.top)+vDiv.offsetHeight)) {
  vDiv.style.visibility = "hidden";
  isvisible = false;
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许 多广告代码下载。
  }
  if (isvisible==false)
  {
  for (i=0;i<lb.length;i++)
  {
  listbox=eval(lb[i].listname)
  listbutton=eval(lb[i].buttonname)
  listvalue=eval(lb[i].valuename)
  listbox.className="lostlist";listbutton.className="menubar"
  listbox.gf="0"
  }
  }
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js 特效，本站收集大量高质量js代码，还有许多广告代码下载。
function ShowMenu(obj,vMnuCode,tWidth,scroll) {
  vMnuCode = "<table id='submenu' cellspacing=0 cellpadding=0 bgcolor=#ffffff border=0 style='width:"+tWidth +";border-collapse: collapse' class='listDiv'><tr height=23><td nowrap align=left>" +
  vMnuCode + "</td></tr></table>";
  menu_height = obj.offsetHeight;
  menu_width = obj.offsetWidth;
  menu_left = obj.offsetLeft + leftMar+2;
  menu_top = obj.offsetTop + topMar + menu_height + space-3;
  vParent = obj.offsetParent;
  while (vParent.tagName.toUpperCase() != "BODY")
  {
  menu_left += vParent.offsetLeft;
  menu_top += vParent.offsetTop;
  vParent = vParent.offsetParent;
  }
  listDiv.innerHTML = vMnuCode;
  listDiv.style.top = menu_top;
  listDiv.style.left = menu_left;
  if (scroll==0) {listDiv.style.overflow="visible";listDiv.style.width=tWidth}
  else {listDiv.style.overflow="scroll";listDiv.style.width=tWidth+18}
  listDiv.style.visibility = "visible";
  var cssopaction=submenu.filters[0].opacity
  submenu.filters[0].opacity=0;
  submenu.filters[1].Apply();
  submenu.filters[0].opacity=100;
  submenu.filters[1].Play();
  isvisible = true;
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下 载。
function menuitem(lightcolor,normalcolor,icon,title,url)
  {
  this.lightcolor=lightcolor
  this.normalcolor=normalcolor
  this.icon=icon
  this.title=title
  this.url=url
  }//欢迎来到站长特效网，我们的网址是ww w.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function bulidmenu(arrayname)
  {
  var menuarray=eval(arrayname)
  menucontent='<table border="0" width="100%">'
  for (i=0;i<menuarray.length;i++)
  {
  if (menuarray[i].title!="_line")
  {
  if (menuarray[i].url!="_disable"){css="getitem"}else{css="lostitem"}
  if (menuarray[i].icon.length==0)
  {
  content='<table cellspacing="0" cellpadding="0"><tr><td style="text-indent:4px" class="'+css+'">'+menuarray[i].title+'</td></tr></table>'
  }
  else
  {
  content='<table cellspacing="0" cellpadding="0"><tr><td width="20" nowrap><img src="'+menuarray[i].icon+'"></td><td class="'+css+'">'+menuarray[i].title+'</td></tr></table>'
  }
  if (menuarray[i].url!="_disable"){
  menucontent=menucontent+'<tr><td height=16 style="cursor:default" onmouseover="style.backgroundColor=''+ menuarray[i].lightcolor+''" onmouseout="style.backgroundColor=''+ menuarray[i].normalcolor+''" onclick="Golist(''+menuarray[i].title+'')">'+content+'</td></tr>'
  }
  else
  {
  menucontent=menucontent+'<tr><td height=16 style="fitler:gray">'+content+'</td></tr>'
  }
  }
  else
  {
  menucontent=menucontent+'<tr><td height=4><img src="images/dock.gif" width="99%" height=1></td></tr>'
  }
  }//欢迎来到站长特效网，我们的网址是www.zzjs.n et，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  menucontent=menucontent+"</table>"
  return menucontent
  }
  function HL_Menu(obj,state)
  {
  switch (state)
  {
  case 0:
  obj.className="menuover"
  break;
  case 1:
  obj.className="menuup"
  break;
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是 js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  }
  var lb=new Array()
  lb[0]=new listbox('listbox0','listbutton0','listvalue0')
  lb[1]=new listbox('listbox1','listbutton1','listvalue1')
  var list1=new Array()
  list1[0]=new menuitem("#B1CBE4","","","ListItem1","")
  list1[1]=new menuitem("#B1CBE4","","","ListItem2","")
  list1[2]=new menuitem("#B1CBE4","","","ListItem3","")
  list1[3]=new menuitem("#B1CBE4","","","ListItem4","")
  list1[4]=new menuitem("#B1CBE4","","","ListItem5","")
  list1[5]=new menuitem("#B1CBE4","","","ListItem6","")
  list1[6]=new menuitem("#B1CBE4","","","ListItem7","")
  list1[7]=new menuitem("#B1CBE4","","","ListItem8","")
  list1[8]=new menuitem("#B1CBE4","","","ListItem9","")
  list1[9]=new menuitem("#B1CBE4","","","ListItem10","")
blist1=bulidmenu("list1")
var list2=new Array()
  list2[0]=new menuitem("#B1CBE4","","","字体1","")
  list2[1]=new menuitem("#B1CBE4","","","字体2","")
  list2[2]=new menuitem("#B1CBE4","","","字体3","")
  list2[3]=new menuitem("#B1CBE4","","","字体4","")
  list2[4]=new menuitem("#B1CBE4","","","字体5","")
  list2[5]=new menuitem("#B1CBE4","","","字体6","")
  list2[6]=new menuitem("#B1CBE4","","","字体7","")
  list2[7]=new menuitem("#B1CBE4","","","字体8","")
  list2[8]=new menuitem("#B1CBE4","","","字体9","")
  list2[9]=new menuitem("#B1CBE4","","","字体10","")
blist2=bulidmenu("list2")
  function Golist(text)
  {
  listvalue=eval(lb[listnum].valuename)
  listvalue.innerText=text
  vDiv = document.all("listDiv");
  vDiv.style.visibility = "hidden";
  isvisible = false;
  } //欢迎来到 站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
<style>
  .lostfocus { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; }
  .getfocus { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; }
.menubar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#F7F7F7, endcolorstr=#DEDBD6)}
  .bodybar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=1, endcolorstr=#F7F7F7, startcolorstr=#DEDBD6)}
  .leftitem { font-family: Arial; font-size: 12px; color: #000000; cursor: hand }
  .getitem { font-family: Arial; font-size: 12px; color: #000000; cursor: default }
  .lostitem { cursor: default; color: #808080; font-size: 12px; font-family: Arial; }
  .menuup { PADDING-LEFT: 4px; PADDING-RIGHT: 4px; CURSOR: hand;}
  .menuover { PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: #B5BED6; BORDER: 1px solid #08246B; CURSOR: hand; }
  .lostlist { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; }
  .getlist { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; }
.listover {BACKGROUND-COLOR: #B5BED6; BORDER-left:1px solid #08246B}
  .listDiv { filter: alpha(opacity=90,finishopacity=0,style=0) blendtrans(duration=.3); }
</style>

<body onclick="HideMenu()" style="margin:0px" bgcolor="999999">
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id=listDiv style='border:1px #636563 solid;VISIBILITY: hidden;POSITION: absolute;overflow:scroll;height:150'></div>
<table border="0" width="100%" id="table27" class="bodybar" cellspacing="0" cellpadding="0">
  <tr>
 <td>
   <table border="0" cellspacing="0" cellpadding="0" height="30">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0" height="22">
     <tr>
    <td width="5"></td>
    <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
       <td class="leftitem">文件(F)</td>
     </tr>
      </table>
    </td>
    <td width="5"></td>
    <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
       <td class="leftitem">编辑(E)</td>
     </tr>
      </table>
    </td>
     </tr>
   </table>
    </td>
  </tr>
   </table>
 </td>
  </tr>
  <tr>
 <td>
   <table border="1" width="100" id="table28" cellspacing="0" cellpadding="4" bgcolor="#F7F7F7" style="border-collapse: collapse">
  <tr>
    <td class="menubar">
   <table border="0" width="100%" id="table29" cellspacing="0" cellpadding="0">
     <tr>
    <td width="10" nowrap>
      <table border="0" width="2" cellspacing="0" cellpadding="1" id="table30">
     <tr>
       <td><img style="border:1px inset" height="1" width="1"></td>
     </tr>
     <tr>
       <td><img style="border:1px inset" height="1" width="1"></td>
     </tr>
     <tr>
       <td><img style="border:1px inset" height="1" width="1"></td>
     </tr>
     <tr>
       <td><img style="border:1px inset" height="1" width="1"></td>
     </tr>
      </table>
    </td>
    <td width="35" nowrap><font size="2">姓名</font></td>
    <td width="130" nowrap><input type="text" name="T5" size="18" class="lostfocus" gf="0" onmouseover='this.className="getfocus"' onmouseout='if (this.gf=="0") this.className="lostfocus"' onblur='this.className="lostfocus";this.gf="0"' onfocus='this.className="getfocus";this.gf="1"'></td>
    <td width="35" nowrap><font size="2">密码</font></td>
    <td width="124" nowrap><input type="password" name="T6" size="18" class="lostfocus" gf="0" onmouseover='this.className="getfocus"' onmouseout='if (this.gf=="0") this.className="lostfocus"' onblur='this.className="lostfocus";this.gf="0"' onfocus='this.className="getfocus";this.gf="1"'></td>
    <td width="5" nowrap><img style="border:1px inset" height=14 width=0></td>
    <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
      <table cellspacing="0" cellpadding="0" id="table31" width="25">
        <tr>
       <td nowrap></td>
       <td class="leftitem">登陆</td>
        </tr>
      </table>
    </td>
    <td width="100%" nowrap></td>
     </tr>
   </table>
    </td>
  </tr>
   </table>
 </td>
  </tr>
  <tr>
 <td>
   <table border="1" width="100" id="table32" cellspacing="0" cellpadding="4" bgcolor="#F7F7F7" style="border-collapse: collapse">
  <tr>
    <td class="menubar">
   <table border="0" width="100%" id="table33" cellspacing="0" cellpadding="0">
     <tr>
    <td width="10" nowrap>
      <table border="0" width="2" cellspacing="0" cellpadding="1" id="table34">
     <tr>
       <td><img style="border:1px inset" height="1" width="1"></td>
     </tr>
     <tr>
       <td><img style="border:1px inset" height="1" width="1"></td>
     </tr>
     <tr>
       <td><img style="border:1px inset" height="1" width="1"></td>
     </tr>
     <tr>
       <td><img style="border:1px inset" height="1" width="1"></td>
     </tr>
      </table>
    </td>
    <td width="78" nowrap><div id="listbox0" class="lostfocus" gf="0" onmouseover='listaction(this,0)' onmouseout='listaction(this,1)' onclick='listaction(this,2,blist1,0)' style="cursor:default">
      <table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table35">
     <tr>
       <td valign="center" style="text-indent:4px"><font size="2" face="Verdana"><span id="listvalue0"> </span></font></td>
       <td width="12" align="center" class="menubar" id="listbutton0">
      <table border="0" cellpadding="0" style="border-collapse: collapse" id="table36">
        <tr height="1">
       <td width="1" bgcolor="#000000"></td>
       <td width="1" bgcolor="#000000"></td>
       <td width="1" bgcolor="#000000"></td>
       <td width="1" bgcolor="#000000"></td>
       <td width="1" bgcolor="#000000"></td>
        </tr>
        <tr height="1">
       <td></td>
       <td bgcolor="#000000"></td>
       <td bgcolor="#000000"></td>
       <td bgcolor="#000000"></td>
       <td></td>
        </tr>
        <tr height="1">
       <td></td>
       <td></td>
       <td bgcolor="#000000"></td>
       <td></td>
       <td></td>
        </tr>
      </table>
       </td>
     </tr>
      </table>
    </div></td>
    <td width="78" nowrap><div id="listbox1" class="lostfocus" gf="0" onmouseover='listaction(this,0)' onmouseout='listaction(this,1)' onclick='listaction(this,2,blist2,1,100)' style="cursor:default">
      <table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table37">
     <tr>
       <td valign="center" style="text-indent:4px"><font size="2" face="Verdana"><span id="listvalue1"> </span></font></td>
       <td width="12" align="center" class="menubar" id="listbutton1">
      <table border="0" cellpadding="0" style="border-collapse: collapse" id="table38">
        <tr height="1">
       <td width="1" bgcolor="#000000"></td>
       <td width="1" bgcolor="#000000"></td>
       <td width="1" bgcolor="#000000"></td>
       <td width="1" bgcolor="#000000"></td>
       <td width="1" bgcolor="#000000"></td>
        </tr>
       <tr height="1">
       <td></td>
       <td bgcolor="#000000"></td>
       <td bgcolor="#000000"></td>
       <td bgcolor="#000000"></td>
       <td></td>
        </tr>
        <tr height="1">
       <td></td>
       <td></td>
       <td bgcolor="#000000"></td>
       <td></td>
       <td></td>
        </tr>
      </table>
       </td>
     </tr>
      </table>
    </div></td>
    <td width="4" nowrap></td>
    <td width="5" nowrap><img style="border:1px inset" height=14 width=0></td>
    <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
      <table cellspacing="0" cellpadding="0" id="table39" width="16">
     <tr>
       <td nowrap></td>
       <td class="leftitem" align=center><b>B</b></td>
     </tr>
      </table>
    </td>
    <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
      <table cellspacing="0" cellpadding="0" id="table40" width="16">
     <tr>
       <td nowrap></td>
       <td class="leftitem" align="center"><i><b>I</b></i></td>
     </tr>
      </table>
    </td>
    <td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup">
      <table cellspacing="0" cellpadding="0" id="table41" width="16">
     <tr>
       <td nowrap></td>
       <td class="leftitem" align=center><u><b>U</b></u></td>
     </tr>
      </table>
    </td>
    <td width="100%" nowrap></td>
     </tr>
   </table>
    </td>
  </tr>
   </table>
 </td>
  </tr>
</table>
</body>
</html>

关于模拟office2000工具条的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010092664985.shtml方便下次再访问哦。

·上一篇： 表格带滚动条效果
·下一篇： css制作美国国旗

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

模拟office2000工具条

文章分类LIST >>返回首页

最新游戏

最新新闻