仿QQ2003风格的导航栏

这是2003年12月制作的网站导航栏，本来想改成基于OOP再放上来的，现在看来今年内都不可能实现了，先公布了再算。

脚本支持代码OutlookBar.js内容：

/*======================================================================

OutlookBar 支持脚本

DESIGN BY : 彭国辉

DATE: 2003.12-2004-3

SITE: http://kacarton.yeah.net/

BLOG: http://blog.csdn.net/nhconch

EMAIL: kacarton@sohu.com

文章为作者原创，转载前请先与本人联系，转载请注明文章出处、保留作者信息，谢谢支持！

========================================================================*/

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>

• ·ASP开发必备:WEB打印代码大全
• ·不用编程，得到一个用户QQ在线状态
• ·ASP获取图片宽度和高度的类
• ·导入类型库注意先后顺序
• ·Winsock控件,实现网络点对点通信
• ·编译运行问题?
• ·JDK 1.5 新功能使用实例之Generic
• ·绘图要在面板上进行，而不要在容器里做，否则得不
• ·2003年所发现的20本好新书 [ZT]
• ·英业达笔试总结，又一种风格的笔试。