热点排行

仿QQ2003风格的导航栏

类别：网站制作 点击：0 评论：0 推荐：

　　这是2003年12月制作的网站导航栏，本来想改成基于OOP再放上来的，现在看来今年内都不可能实现了，先公布了再算。
　　效果见右图，它两个脚本和HTML页面组成，下面是详细代码，演示内容可以从http://www.freewebs.com/kacarton/software/outlookbar.rar(7K)下载：

脚本支持代码OutlookBar.js内容：
/*======================================================================
  OutlookBar 支持脚本
  DESIGN BY :  彭国辉
  DATE:        2003.12-2004-3
  SITE:        http://kacarton.yeah.net/
  BLOG:        http://blog.csdn.net/nhconch
  EMAIL:       [email protected]

  文章为作者原创，转载前请先与本人联系，转载请注明文章出处、保留作者信息，谢谢支持！
========================================================================*/
var bar_open = false;
var active_bar = null;
var timer = null;

function Bar_Click(obj)
{
    var bar = document.getElementById("first_bar");
    if (bar==null || obj==null) return;
    bar = bar.nextSibling;
    while (bar)
    {
        if (bar.extend!="MenuBar") bar.style.display="none";
        bar = bar.nextSibling;
    }
    active_bar = obj;
    obj.nextSibling.style.display='block';
    ScrollButton_MoveTo(obj.nextSibling);
}

function Item_Click(obj)
{
    if (obj==null) return;
    mainfrm = document.getElementById("main");
    mainfrm.src = obj.href;
}

function Item_MouseDown(obj)
{
    obj.style.borderWidth=1;
    obj.style.borderTopColor="#666666";
    obj.style.borderBottomColor="#FFFFFF";
    obj.style.borderLeftColor="#666666";
    obj.style.borderRightColor="#FFFFFF";
}

function Item_MouseUp(obj)
{
    Item_MouseOver(obj);
}

function Item_MouseOver(obj)
{
    if (obj==null) return;
    obj.style.borderWidth=1;
    obj.style.borderTopColor="#FFFFFF";
    obj.style.borderBottomColor="#666666";
    obj.style.borderLeftColor="#FFFFFF";
    obj.style.borderRightColor="#666666";
}

function Item_MouseOut(obj)
{
    if (obj==null) return;
    obj.style.borderWidth=0;
}

function ScrollButton_MoveTo(obj)
{
    var scroll_btn_up = document.getElementById("scroll_btn_up");
    var scroll_btn_dn = document.getElementById("scroll_btn_dn");
    if (obj==null || scroll_btn_up==null || scroll_btn_dn==null) return;
    scroll_btn_up.style.pixelLeft = obj.offsetParent.offsetWidth-19;//scroll_btn_up.offsetWidth;
    scroll_btn_up.style.pixelTop = obj.offsetTop+25;//scroll_btn_up.offsetHeight+6;
    scroll_btn_dn.style.pixelLeft = obj.offsetParent.offsetWidth-19;//scroll_btn_up.offsetWidth;
    scroll_btn_dn.style.pixelTop = obj.offsetTop+obj.offsetHeight;
    var client = obj.children[0].children[0];
    if (client.offsetHeight==client.children[0].offsetHeight)
    {
        scroll_btn_up.style.display="none";
        scroll_btn_dn.style.display="none";
    }
    else
    {
        if (client.scrollTop<=0)
            scroll_btn_up.style.display="none";
        else
            scroll_btn_up.style.display="block";
        if (client.offsetHeight+client.scrollTop>=client.children[0].offsetHeight)
            scroll_btn_dn.style.display="none";
        else
            scroll_btn_dn.style.display="block";
    }
}

function setScrollBtn() {if (active_bar) ScrollButton_MoveTo(active_bar.nextSibling);}

function scrollStart(step)
{
    if (active_bar==null) return;
    var obj = active_bar.nextSibling.children[0].children[0];
    if (obj==null) return;
    obj.scrollTop+=step;
    if (obj.scrollTop>0 && obj.scrollTop+obj.offsetHeight<obj.children[0].offsetHeight)
        timer = setTimeout("scrollStart("+step+")", 100);
    else
        setScrollBtn();
}

function scrollStop()
{
    clearTimeout(timer);
}

function addBar(caption)
{
    if (bar_open) barEnd();
    bar_open = true;
    document.write("<tr onclick=\"Bar_Click(this)\" height=19 extend=\"MenuBar\" style=\"cursor: hand\">\n"
                 + " <td valign=middle width=6><img src=\"../image/btn_left.gif\" width=6 height=19 border=0></td>\n"
                 + " <td valign=middle width=100% align=center background=\"../image/btn_mid.gif\">"+caption+"</td>\n"
                 + " <td valign=middle width=6><img src=\"../image/btn_right.gif\" width=6 height=19 border=0></td>\n"
                 + "</tr><tr style=\"display:none\"><td colspan=3 valign=top>\n"
                 + " <div style='height:100%;width:100%;overflow:hidden;' onresize='setScrollBtn();';>"
                 + "<table width=100% border=0 align=center valign=top>");
}

function barEnd()
{
    document.write("</table></div></td></tr>\n");
    bar_open = false;
}

function addItem(caption, href)
{
    if (caption==null || href==null) return;
    document.write("<tr height=20><td align=center valign=middle onmousedown=\"Item_MouseDown(this)\" onmouseup=\"Item_MouseUp(this)\" onmouseenter=\"Item_MouseOver(this)\" onmouseout=\"Item_MouseOut(this)\" onclick=\"Item_Click(this)\" href=\""+href+"\" style=\"border:0 solid; BORDER-LEFT-COLOR: #FFFFF; BORDER-BOTTOM-COLOR: #666666; BORDER-TOP-COLOR: #FFFFF; BORDER-RIGHT-COLOR: #666666;cursor: hand\">"+caption+"</td></tr>\n");
}

function showFirst()
{
    var bar = document.getElementById("first_bar");
    if (bar==null) return;
    bar = bar.nextSibling;
    while (bar && bar.extend!="MenuBar") bar = bar.nextSibling;
    if (bar.extend=="MenuBar") Bar_Click(bar);
}

function showOutlookBar()
{
    document.write("<table width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center valign=top>\n"
                 + "<tr height=0 style=\"display:none\" id=\"first_bar\"><td></td></tr>\n");
    showItems();
    if (bar_open) barEnd();
    document.write("</table>\n"
                 + "<input id=\"scroll_btn_up\" type=image src=\"../image/scrlbtnup.gif\" style='z-index:3;position:absolute;width:19px;height:19px;left:0;top:0;display:none;' onmousedown='scrollStart(-20);' onmouseup='scrollStop();' onclick='return false;'>\n"
                 + "<input id=\"scroll_btn_dn\" type=image src=\"../image/scrlbtndn.gif\" style='z-index:3;position:absolute;width:19px;height:19px;left:0;top:0;display:none;' onmousedown='scrollStart(20);' onmouseup='scrollStop();' onclick='return false;'>\n");
    showFirst();
}

导航内容脚本代码MenuBar.js（改变导航内容更改此文件即可）：
function showItems()
{
addBar("个人资料");
  addItem("修改资料","1.htm");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://kacarton.yeah.net");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("我的网站","http://kacarton.yeah.net");
  addItem("个人作品","http://blog.csdn.net/nhconch");
  addItem("========","changepsw.asp");
addBar("供应信息");
  addItem("供应信息1","1.htm");
  addItem("我的信息1","2.htm");
addBar("需求信息");
  addItem("需求信息2","3.htm");
  addItem("我的信息2","4.htm");
addBar("合作项目");
  addItem("需求信息2","3.htm");
  addItem("我的信息2","4.htm");
addBar("人才专栏");
  addItem("需求信息2","3.htm");
  addItem("我的信息2","4.htm");
addBar("人才专栏");
  addItem("需求信息2","3.htm");
  addItem("我的信息2","4.htm");
addBar("测试栏目");
  addItem("测试栏目","3.htm");
  addItem("测试栏目","4.htm");
addBar("测试栏目");
  addItem("测试栏目","3.htm");
  addItem("测试栏目","4.htm");
addBar("测试栏目");
  addItem("测试栏目","3.htm");
  addItem("测试栏目","4.htm");
addBar("测试栏目");
  addItem("测试栏目","3.htm");
  addItem("测试栏目","4.htm");
addBar("测试栏目");
  addItem("测试栏目","3.htm");
  addItem("测试栏目","4.htm");
addBar("测试栏目");
  addItem("测试栏目","3.htm");
  addItem("测试栏目","4.htm");
}


演示页outlookbar.htm内容：
<HTML>
<HEAD>
<TITLE>会员中心</TITLE>
<link href="../css/css.css" rel="stylesheet" type="text/css">
<SCRIPT LANGUAGE="Javascript" SRC="../lib/outlookbar.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="menubar.js"></SCRIPT>
</HEAD>
<BODY topmargin="0" leftmargin="1">
<TABLE border="0" width="100%" height=100% cellspacing="0" cellpadding="0">
   <TR>
    <TD width=120 valign=top bgcolor="#F2F2F2" style="border:1 solid #5A8AEF">
    <table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="2" bgcolor="#5A8AEF">
      <tr>
        <td width=100% height="18" background="../image/navbar.gif"><span><font color=#FFFFFF><b>&nbsp;&nbsp;&nbsp;&nbsp;会员中心</b></font></span></td>
        <td width=10 background="../image/navbar.gif"><img src="../image/closebtn.gif" width="13" height="13" alt="注销" border=0 onclick="location='../logout.asp';"></td>
      </tr>
      <tr>
        <td bgcolor="#F2F2F2" valign=top colspan=2><SCRIPT LANGUAGE="Javascript">showOutlookBar();</SCRIPT></td>
      </tr>
    </table>
     <td valign=top>
    <table border="0" width="100%" cellspacing="0" cellpadding="0" height=100%>
  <tr>
    <td height="100%" colspan="2">
     <iframe name="main" frameborder=0 width=100% scrolling=yes height=100% src="about:blank"></iframe>
    </td>
  </tr>
</table>
    </td>
   </TR>
</TABLE>
</BODY>
</HTML>

本文地址：http://com.8s8s.com/it/it31045.htm

Copyright © 2004-2013 信息技术中文网 All rights reserved 版权所有

Powered by 信息技术中文网 Ver2.0