网页中滑动导航菜单制作
2010-04-23 14:05
423 查看
<html>
<head>
<title>网页特效-导航菜单-滑动的二级导航菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.submenu {
Z-INDEX: 2; LEFT: 100px; margin-left:501px; VISIBILITY: hidden; WIDTH: 500px; POSITION: absolute; TOP: 69px; HEIGHT: 22px; BACKGROUND-COLOR: #eaeaea
}
a { font-family: "Tahoma"; font-size: 12px; color: #000000; text-decoration: none}
a:hover { font-family: "Tahoma"; font-size: 12px; color: #00CCFF; text-decoration: none}
</style>
<script>
// convert all characters to lowercase to simplify testing
var agt=navigator.userAgent.toLowerCase();
// *** 判断浏览器版本 BROWSER VERSION ***
// Note: On IE5, these return 4, so use is_ie5up to detect IE5.
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
// Note: Opera and WebTV spoof Navigator. We do strict client detection.
// If you want to allow spoofing, take out the tests for opera and webtv.
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1) && (agt.indexOf('webtv')==-1));
var is_nav2 = (is_nav && (is_major == 2));
var is_nav3 = (is_nav && (is_major == 3));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav4up = (is_nav && (is_major >= 4));
var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) || (agt.indexOf("; nav") != -1)) );
var is_nav5 = (is_nav && (is_major == 5));
var is_nav5up = (is_nav && (is_major >= 5));
var is_ie = (agt.indexOf("msie") != -1);
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")==-1) );
var is_ie4up = (is_ie && (is_major >= 4));
var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
// KNOWN BUG: On AOL4, returns false if IE3 is embedded browser
// or if this is the first browser window opened. Thus the
// variables is_aol, is_aol3, and is_aol4 aren't 100% reliable.
var is_aol = (agt.indexOf("aol") != -1);
var is_aol3 = (is_aol && is_ie3);
var is_aol4 = (is_aol && is_ie4);
var is_opera = (agt.indexOf("opera") != -1);
var is_webtv = (agt.indexOf("webtv") != -1);
// *** 判断JS版本 JAVASCRIPT VERSION CHECK ***
var is_js;
if (is_nav2 || is_ie3) is_js = 1.0
else if (is_nav3 || is_opera) is_js = 1.1
else if ((is_nav4 && (is_minor <= 4.05)) || is_ie4) is_js = 1.2
else if ((is_nav4 && (is_minor > 4.05)) || is_ie5) is_js = 1.3
else if (is_nav5) is_js = 1.4
// NOTE: In the future, update this code when newer versions of JS
// are released. For now, we try to provide some upward compatibility
// so that future versions of Nav and IE will show they are at
// *least* JS 1.x capable. Always check for JS version compatibility
// with > or >=.
else if (is_nav && (is_major > 5)) is_js = 1.4
else if (is_ie && (is_major > 5)) is_js = 1.3
// HACK: no idea for other browsers; always check for JS version with > or >=
else is_js = 0.0;
// ***判断操作系统类型 PLATFORM ***
var is_win = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );
// NOTE: On Opera 3.0, the userAgent string includes "Windows 95/NT4" on all
// Win32, so you can't distinguish between Win95 and WinNT.
var is_win95 = ((agt.indexOf("win95")!=-1) || (agt.indexOf("windows 95")!=-1));
// is this a 16 bit compiled version?
var is_win16 = ((agt.indexOf("win16")!=-1) || (agt.indexOf("16bit")!=-1) || (agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("windows 16-bit")!=-1) );
var is_win31 = ((agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("win16")!=-1) || (agt.indexOf("windows 16-bit")!=-1));
// NOTE: Reliable detection of Win98 may not be possible. It appears that:
// - On Nav 4.x and before you'll get plain "Windows" in userAgent.
// - On Mercury client, the 32-bit version will return "Win98", but
// the 16-bit version running on Win98 will still return "Win95".
var is_win98 = ((agt.indexOf("win98")!=-1) || (agt.indexOf("windows 98")!=-1));
var is_winnt = ((agt.indexOf("winnt")!=-1) || (agt.indexOf("windows nt")!=-1));
var is_win32 = (is_win95 || is_winnt || is_win98 || ((is_major >= 4) && (navigator.platform == "Win32")) || (agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1));
var is_os2 = ((agt.indexOf("os/2")!=-1) || (navigator.appVersion.indexOf("OS/2")!=-1) || (agt.indexOf("ibm-webexplorer")!=-1));
var is_mac = (agt.indexOf("mac")!=-1);
var is_mac68k = (is_mac && ((agt.indexOf("68k")!=-1) || (agt.indexOf("68000")!=-1)));
var is_macppc = (is_mac && ((agt.indexOf("ppc")!=-1) || (agt.indexOf("powerpc")!=-1)));
var is_sun = (agt.indexOf("sunos")!=-1);
var is_sun4 = (agt.indexOf("sunos 4")!=-1);
var is_sun5 = (agt.indexOf("sunos 5")!=-1);
var is_suni86 = (is_sun && (agt.indexOf("i86")!=-1));
var is_irix = (agt.indexOf("irix") !=-1); // SGI
var is_irix5 = (agt.indexOf("irix 5") !=-1);
var is_irix6 = ((agt.indexOf("irix 6") !=-1) || (agt.indexOf("irix6") !=-1));
var is_hpux = (agt.indexOf("hp-ux")!=-1);
var is_hpux9 = (is_hpux && (agt.indexOf("09.")!=-1));
var is_hpux10 = (is_hpux && (agt.indexOf("10.")!=-1));
var is_aix = (agt.indexOf("aix") !=-1); // IBM
var is_aix1 = (agt.indexOf("aix 1") !=-1);
var is_aix2 = (agt.indexOf("aix 2") !=-1);
var is_aix3 = (agt.indexOf("aix 3") !=-1);
var is_aix4 = (agt.indexOf("aix 4") !=-1);
var is_linux = (agt.indexOf("inux")!=-1);
var is_sco = (agt.indexOf("sco")!=-1) || (agt.indexOf("unix_sv")!=-1);
var is_unixware = (agt.indexOf("unix_system_v")!=-1);
var is_mpras = (agt.indexOf("ncr")!=-1);
var is_reliant = (agt.indexOf("reliantunix")!=-1);
var is_dec = ((agt.indexOf("dec")!=-1) || (agt.indexOf("osf1")!=-1) || (agt.indexOf("dec_alpha")!=-1) || (agt.indexOf("alphaserver")!=-1) || (agt.indexOf("ultrix")!=-1) || (agt.indexOf("alphastation")!=-1));
var is_sinix = (agt.indexOf("sinix")!=-1);
var is_freebsd = (agt.indexOf("freebsd")!=-1);
var is_bsd = (agt.indexOf("bsd")!=-1);
var is_unix = ((agt.indexOf("x11")!=-1) || is_sun || is_irix || is_hpux || is_sco ||is_unixware || is_mpras || is_reliant || is_dec || is_sinix || is_aix || is_linux || is_bsd || is_freebsd);
var is_vms = ((agt.indexOf("vax")!=-1) || (agt.indexOf("openvms")!=-1));
var usernameSwf = new Object();
InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
var layer= new String();
var style= new String();
var i, current;
var running = 0;
//浏览器对层的支持 browser check for layers
if (is_nav5up){
style=".style";
}else if (is_nav4){
layer=".layers";
style="";
}else if (is_ie4up){
layer=".all";
style=".style";
}
function rollOver(name,flg){
hidelayer();
changeState(name,'visible');
reset_bg();
//alert(name);
//alert(flg);
set_bg(name+"0", flg);
}
// 层的动作
function rollOut(name){
var loImage;
var chkImage;
layerRef=name;
if ((is_nav4) || (is_ie4up)){
lyr="document"+layer+"['"+layerRef+"']"+style+".visibility";
}else if (is_nav5up){
lyr="document.getElementById('"+layerRef+"').style.visibility";
}
}
var n,i,startLeft,endLeft;
var moveX = new Array(1.00, 0.85, 0.64, 0.48, 0.37, 0.28, 0.21, 0.16, 0.12, 0.09, 0.068, 0.05, 0.036, 0.022, 0.01, 0.001, 0.00);
//var moveX = new Array(16, 15, 14,13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.00);
function changeState(layerRef,state){
if (is_nav5up){
evallayer="document.getElementById('"+layerRef+"').style.visibility='"+state+"'";
}else{
evallayer="document"+layer+"['"+layerRef+"']"+style+".visibility='"+state+"'";
}
if(current != layerRef){
current = layerRef;
running = 1;
n = 1;
i = -500;//层移动进入画面开始的位置：+数可以显示出回弹效果，-数则直接从左到右进入
startLeft =500;//层移动开始的位置：与层移动结束后的相对长度XXXpx位置
endLeft = (document.body.clientWidth-500)/2-1;//层移动结束后的位置：距离右边距XXXpx
eval(evallayer);
moveLayer(i,layerRef);
}else{
eval(evallayer);
}
}
function moveLayer(i,layerRef){
if (is_nav5up){
evallayer="document.getElementById('"+layerRef+"').style.left="-i;
}else{
evallayer="document"+layer+"['"+layerRef+"']"+style+".left="+i;
}
if((i<endLeft) && (running==1) && (current==layerRef)){
n++;
i = +(startLeft*moveX
)-endLeft;//这两个参数的+ -决定了移动的方向，还要配合function changeState(layerRef,state)参数
eval(evallayer);
setTimeout('moveLayer('+i+',"'+layerRef+'")',75);//最后这个参数为移动速度，越大越慢
}else if((running==1) && (current==layerRef)){
running = 0;
}
}
function hidelayer(){
if (is_nav5up){
eval("document.getElementById('m00').style.visibility='hidden'");
eval("document.getElementById('m01').style.visibility='hidden'");
eval("document.getElementById('m02').style.visibility='hidden'");
eval("document.getElementById('m03').style.visibility='hidden'");
eval("document.getElementById('m04').style.visibility='hidden'");
eval("document.getElementById('m05').style.visibility='hidden'");
eval("document.getElementById('m06').style.visibility='hidden'");
eval("document.getElementById('m07').style.visibility='hidden'");
}else{
eval("document"+layer+"['m00']"+style+".visibility='hidden'");
eval("document"+layer+"['m01']"+style+".visibility='hidden'");
eval("document"+layer+"['m02']"+style+".visibility='hidden'");
eval("document"+layer+"['m03']"+style+".visibility='hidden'");
eval("document"+layer+"['m04']"+style+".visibility='hidden'");
eval("document"+layer+"['m05']"+style+".visibility='hidden'");
eval("document"+layer+"['m06']"+style+".visibility='hidden'");
eval("document"+layer+"['m07']"+style+".visibility='hidden'");
}
}
function set_bg(name, bg){
//alert(name);
eval("document.all[/""+name+"/"]").className = bg;
}
function reset_bg(){
for(i=0 ; i<8 ; i++){
set_bg("m0" + i + "0", 'bg1');
}
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="submenu" id="m00" name="m00" style="left: 0px; top: 40px; width: 500px; height: 22px">
<table cellSpacing="0" cellPadding="0" width="100%" border="0" align="center">
<tr>
<td>→ <a href="#">长城集团</a> | <a href="#">公司介绍</a> | <a href="#">总裁致词</a> | <a href="#">组织架构</a> | <a href="#">公司业务</a> | <a href="#">资质与获奖</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m01" name="m01" style="height: 22px; width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">公司动态</a> | <a href="#">媒体关注</a> | <a href="#">专题报道</a> </td>
</tr>
</table>
</div>
<div class="submenu" id="m02" name="m02" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">产品概述</a> | <a href="#">数字监控系统</a> | <a href="#">EIPOA</a> | <a href="#">CRM</a> | <a href="#">VOD系统</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m03" name="m03" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">方案概述</a> | <a href="#">数字监控系统</a> | <a href="#">企业ERP</a> | <a href="#">电子政务</a> | <a href="#">企业信息门户</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m04" name="m04" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">OA</a> | <a href="#">CRM</a> | <a href="#">VOD</a> | <a href="#">数字监控</a> | <a href="#">系统集成</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m05" name="m05" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">服务理念</a> | <a href="#">常见问题解答</a> | <a href="#">业务联系</a> | <a href="#">信息反馈</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m06" name="m06" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">合作政策</a> | <a href="#">商务合作</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m07" name="m07" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">招聘总览</a> | <a href="#">产品类</a> | <a href="#">技术类</a> | <a href="#">市场类</a> | <a href="#">行政财务类</a></td>
</tr>
</table>
</div>
<table cellSpacing="1" cellPadding="4" width="500" bgColor="#999999" border="0" align="center">
<tr vAlign="bottom" align="middle">
<td id="m000"><a onmouseover="rollOver('m00');" onmouseout="rollOut('m00');" href="#">关于我们</a></td>
<td id="m010"><a onmouseover="rollOver('m01');" onmouseout="rollOut('m01');" href="#">新闻动态</a></td>
<td id="m020"><a onmouseover="rollOver('m02');" onmouseout="rollOut('m02');" href="#">应用产品</a></td>
<td id="m030"><a onmouseover="rollOver('m03');" onmouseout="rollOut('m03');" href="#">解决方案</a></td>
<td id="m040"><a onmouseover="rollOver('m04');" onmouseout="rollOut('m04');" href="#">成功案例</a></td>
<td id="m050"><a onmouseover="rollOver('m05');" onmouseout="rollOut('m05');" href="#">客户服务</a></td>
<td id="m060"><a onmouseover="rollOver('m06');" onmouseout="rollOut('m06');" href="#">对外合作</a></td>
<td id="m070"><a onmouseover="rollOver('m07');" onmouseout="rollOut('m07');" href="#">求才若宝</a></td>
</tr>
</table>
</body>
</html>
<head>
<title>网页特效-导航菜单-滑动的二级导航菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.submenu {
Z-INDEX: 2; LEFT: 100px; margin-left:501px; VISIBILITY: hidden; WIDTH: 500px; POSITION: absolute; TOP: 69px; HEIGHT: 22px; BACKGROUND-COLOR: #eaeaea
}
a { font-family: "Tahoma"; font-size: 12px; color: #000000; text-decoration: none}
a:hover { font-family: "Tahoma"; font-size: 12px; color: #00CCFF; text-decoration: none}
</style>
<script>
// convert all characters to lowercase to simplify testing
var agt=navigator.userAgent.toLowerCase();
// *** 判断浏览器版本 BROWSER VERSION ***
// Note: On IE5, these return 4, so use is_ie5up to detect IE5.
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
// Note: Opera and WebTV spoof Navigator. We do strict client detection.
// If you want to allow spoofing, take out the tests for opera and webtv.
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1) && (agt.indexOf('webtv')==-1));
var is_nav2 = (is_nav && (is_major == 2));
var is_nav3 = (is_nav && (is_major == 3));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav4up = (is_nav && (is_major >= 4));
var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) || (agt.indexOf("; nav") != -1)) );
var is_nav5 = (is_nav && (is_major == 5));
var is_nav5up = (is_nav && (is_major >= 5));
var is_ie = (agt.indexOf("msie") != -1);
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")==-1) );
var is_ie4up = (is_ie && (is_major >= 4));
var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
// KNOWN BUG: On AOL4, returns false if IE3 is embedded browser
// or if this is the first browser window opened. Thus the
// variables is_aol, is_aol3, and is_aol4 aren't 100% reliable.
var is_aol = (agt.indexOf("aol") != -1);
var is_aol3 = (is_aol && is_ie3);
var is_aol4 = (is_aol && is_ie4);
var is_opera = (agt.indexOf("opera") != -1);
var is_webtv = (agt.indexOf("webtv") != -1);
// *** 判断JS版本 JAVASCRIPT VERSION CHECK ***
var is_js;
if (is_nav2 || is_ie3) is_js = 1.0
else if (is_nav3 || is_opera) is_js = 1.1
else if ((is_nav4 && (is_minor <= 4.05)) || is_ie4) is_js = 1.2
else if ((is_nav4 && (is_minor > 4.05)) || is_ie5) is_js = 1.3
else if (is_nav5) is_js = 1.4
// NOTE: In the future, update this code when newer versions of JS
// are released. For now, we try to provide some upward compatibility
// so that future versions of Nav and IE will show they are at
// *least* JS 1.x capable. Always check for JS version compatibility
// with > or >=.
else if (is_nav && (is_major > 5)) is_js = 1.4
else if (is_ie && (is_major > 5)) is_js = 1.3
// HACK: no idea for other browsers; always check for JS version with > or >=
else is_js = 0.0;
// ***判断操作系统类型 PLATFORM ***
var is_win = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );
// NOTE: On Opera 3.0, the userAgent string includes "Windows 95/NT4" on all
// Win32, so you can't distinguish between Win95 and WinNT.
var is_win95 = ((agt.indexOf("win95")!=-1) || (agt.indexOf("windows 95")!=-1));
// is this a 16 bit compiled version?
var is_win16 = ((agt.indexOf("win16")!=-1) || (agt.indexOf("16bit")!=-1) || (agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("windows 16-bit")!=-1) );
var is_win31 = ((agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("win16")!=-1) || (agt.indexOf("windows 16-bit")!=-1));
// NOTE: Reliable detection of Win98 may not be possible. It appears that:
// - On Nav 4.x and before you'll get plain "Windows" in userAgent.
// - On Mercury client, the 32-bit version will return "Win98", but
// the 16-bit version running on Win98 will still return "Win95".
var is_win98 = ((agt.indexOf("win98")!=-1) || (agt.indexOf("windows 98")!=-1));
var is_winnt = ((agt.indexOf("winnt")!=-1) || (agt.indexOf("windows nt")!=-1));
var is_win32 = (is_win95 || is_winnt || is_win98 || ((is_major >= 4) && (navigator.platform == "Win32")) || (agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1));
var is_os2 = ((agt.indexOf("os/2")!=-1) || (navigator.appVersion.indexOf("OS/2")!=-1) || (agt.indexOf("ibm-webexplorer")!=-1));
var is_mac = (agt.indexOf("mac")!=-1);
var is_mac68k = (is_mac && ((agt.indexOf("68k")!=-1) || (agt.indexOf("68000")!=-1)));
var is_macppc = (is_mac && ((agt.indexOf("ppc")!=-1) || (agt.indexOf("powerpc")!=-1)));
var is_sun = (agt.indexOf("sunos")!=-1);
var is_sun4 = (agt.indexOf("sunos 4")!=-1);
var is_sun5 = (agt.indexOf("sunos 5")!=-1);
var is_suni86 = (is_sun && (agt.indexOf("i86")!=-1));
var is_irix = (agt.indexOf("irix") !=-1); // SGI
var is_irix5 = (agt.indexOf("irix 5") !=-1);
var is_irix6 = ((agt.indexOf("irix 6") !=-1) || (agt.indexOf("irix6") !=-1));
var is_hpux = (agt.indexOf("hp-ux")!=-1);
var is_hpux9 = (is_hpux && (agt.indexOf("09.")!=-1));
var is_hpux10 = (is_hpux && (agt.indexOf("10.")!=-1));
var is_aix = (agt.indexOf("aix") !=-1); // IBM
var is_aix1 = (agt.indexOf("aix 1") !=-1);
var is_aix2 = (agt.indexOf("aix 2") !=-1);
var is_aix3 = (agt.indexOf("aix 3") !=-1);
var is_aix4 = (agt.indexOf("aix 4") !=-1);
var is_linux = (agt.indexOf("inux")!=-1);
var is_sco = (agt.indexOf("sco")!=-1) || (agt.indexOf("unix_sv")!=-1);
var is_unixware = (agt.indexOf("unix_system_v")!=-1);
var is_mpras = (agt.indexOf("ncr")!=-1);
var is_reliant = (agt.indexOf("reliantunix")!=-1);
var is_dec = ((agt.indexOf("dec")!=-1) || (agt.indexOf("osf1")!=-1) || (agt.indexOf("dec_alpha")!=-1) || (agt.indexOf("alphaserver")!=-1) || (agt.indexOf("ultrix")!=-1) || (agt.indexOf("alphastation")!=-1));
var is_sinix = (agt.indexOf("sinix")!=-1);
var is_freebsd = (agt.indexOf("freebsd")!=-1);
var is_bsd = (agt.indexOf("bsd")!=-1);
var is_unix = ((agt.indexOf("x11")!=-1) || is_sun || is_irix || is_hpux || is_sco ||is_unixware || is_mpras || is_reliant || is_dec || is_sinix || is_aix || is_linux || is_bsd || is_freebsd);
var is_vms = ((agt.indexOf("vax")!=-1) || (agt.indexOf("openvms")!=-1));
var usernameSwf = new Object();
InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
var layer= new String();
var style= new String();
var i, current;
var running = 0;
//浏览器对层的支持 browser check for layers
if (is_nav5up){
style=".style";
}else if (is_nav4){
layer=".layers";
style="";
}else if (is_ie4up){
layer=".all";
style=".style";
}
function rollOver(name,flg){
hidelayer();
changeState(name,'visible');
reset_bg();
//alert(name);
//alert(flg);
set_bg(name+"0", flg);
}
// 层的动作
function rollOut(name){
var loImage;
var chkImage;
layerRef=name;
if ((is_nav4) || (is_ie4up)){
lyr="document"+layer+"['"+layerRef+"']"+style+".visibility";
}else if (is_nav5up){
lyr="document.getElementById('"+layerRef+"').style.visibility";
}
}
var n,i,startLeft,endLeft;
var moveX = new Array(1.00, 0.85, 0.64, 0.48, 0.37, 0.28, 0.21, 0.16, 0.12, 0.09, 0.068, 0.05, 0.036, 0.022, 0.01, 0.001, 0.00);
//var moveX = new Array(16, 15, 14,13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.00);
function changeState(layerRef,state){
if (is_nav5up){
evallayer="document.getElementById('"+layerRef+"').style.visibility='"+state+"'";
}else{
evallayer="document"+layer+"['"+layerRef+"']"+style+".visibility='"+state+"'";
}
if(current != layerRef){
current = layerRef;
running = 1;
n = 1;
i = -500;//层移动进入画面开始的位置：+数可以显示出回弹效果，-数则直接从左到右进入
startLeft =500;//层移动开始的位置：与层移动结束后的相对长度XXXpx位置
endLeft = (document.body.clientWidth-500)/2-1;//层移动结束后的位置：距离右边距XXXpx
eval(evallayer);
moveLayer(i,layerRef);
}else{
eval(evallayer);
}
}
function moveLayer(i,layerRef){
if (is_nav5up){
evallayer="document.getElementById('"+layerRef+"').style.left="-i;
}else{
evallayer="document"+layer+"['"+layerRef+"']"+style+".left="+i;
}
if((i<endLeft) && (running==1) && (current==layerRef)){
n++;
i = +(startLeft*moveX
)-endLeft;//这两个参数的+ -决定了移动的方向，还要配合function changeState(layerRef,state)参数
eval(evallayer);
setTimeout('moveLayer('+i+',"'+layerRef+'")',75);//最后这个参数为移动速度，越大越慢
}else if((running==1) && (current==layerRef)){
running = 0;
}
}
function hidelayer(){
if (is_nav5up){
eval("document.getElementById('m00').style.visibility='hidden'");
eval("document.getElementById('m01').style.visibility='hidden'");
eval("document.getElementById('m02').style.visibility='hidden'");
eval("document.getElementById('m03').style.visibility='hidden'");
eval("document.getElementById('m04').style.visibility='hidden'");
eval("document.getElementById('m05').style.visibility='hidden'");
eval("document.getElementById('m06').style.visibility='hidden'");
eval("document.getElementById('m07').style.visibility='hidden'");
}else{
eval("document"+layer+"['m00']"+style+".visibility='hidden'");
eval("document"+layer+"['m01']"+style+".visibility='hidden'");
eval("document"+layer+"['m02']"+style+".visibility='hidden'");
eval("document"+layer+"['m03']"+style+".visibility='hidden'");
eval("document"+layer+"['m04']"+style+".visibility='hidden'");
eval("document"+layer+"['m05']"+style+".visibility='hidden'");
eval("document"+layer+"['m06']"+style+".visibility='hidden'");
eval("document"+layer+"['m07']"+style+".visibility='hidden'");
}
}
function set_bg(name, bg){
//alert(name);
eval("document.all[/""+name+"/"]").className = bg;
}
function reset_bg(){
for(i=0 ; i<8 ; i++){
set_bg("m0" + i + "0", 'bg1');
}
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="submenu" id="m00" name="m00" style="left: 0px; top: 40px; width: 500px; height: 22px">
<table cellSpacing="0" cellPadding="0" width="100%" border="0" align="center">
<tr>
<td>→ <a href="#">长城集团</a> | <a href="#">公司介绍</a> | <a href="#">总裁致词</a> | <a href="#">组织架构</a> | <a href="#">公司业务</a> | <a href="#">资质与获奖</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m01" name="m01" style="height: 22px; width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">公司动态</a> | <a href="#">媒体关注</a> | <a href="#">专题报道</a> </td>
</tr>
</table>
</div>
<div class="submenu" id="m02" name="m02" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">产品概述</a> | <a href="#">数字监控系统</a> | <a href="#">EIPOA</a> | <a href="#">CRM</a> | <a href="#">VOD系统</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m03" name="m03" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">方案概述</a> | <a href="#">数字监控系统</a> | <a href="#">企业ERP</a> | <a href="#">电子政务</a> | <a href="#">企业信息门户</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m04" name="m04" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">OA</a> | <a href="#">CRM</a> | <a href="#">VOD</a> | <a href="#">数字监控</a> | <a href="#">系统集成</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m05" name="m05" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">服务理念</a> | <a href="#">常见问题解答</a> | <a href="#">业务联系</a> | <a href="#">信息反馈</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m06" name="m06" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">合作政策</a> | <a href="#">商务合作</a></td>
</tr>
</table>
</div>
<div class="submenu" id="m07" name="m07" style="width: 500px; left: 0px; top: 40px">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td>→ <a href="#">招聘总览</a> | <a href="#">产品类</a> | <a href="#">技术类</a> | <a href="#">市场类</a> | <a href="#">行政财务类</a></td>
</tr>
</table>
</div>
<table cellSpacing="1" cellPadding="4" width="500" bgColor="#999999" border="0" align="center">
<tr vAlign="bottom" align="middle">
<td id="m000"><a onmouseover="rollOver('m00');" onmouseout="rollOut('m00');" href="#">关于我们</a></td>
<td id="m010"><a onmouseover="rollOver('m01');" onmouseout="rollOut('m01');" href="#">新闻动态</a></td>
<td id="m020"><a onmouseover="rollOver('m02');" onmouseout="rollOut('m02');" href="#">应用产品</a></td>
<td id="m030"><a onmouseover="rollOver('m03');" onmouseout="rollOut('m03');" href="#">解决方案</a></td>
<td id="m040"><a onmouseover="rollOver('m04');" onmouseout="rollOut('m04');" href="#">成功案例</a></td>
<td id="m050"><a onmouseover="rollOver('m05');" onmouseout="rollOut('m05');" href="#">客户服务</a></td>
<td id="m060"><a onmouseover="rollOver('m06');" onmouseout="rollOut('m06');" href="#">对外合作</a></td>
<td id="m070"><a onmouseover="rollOver('m07');" onmouseout="rollOut('m07');" href="#">求才若宝</a></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 网页设计-[CSS+DIV设计实例：纯CSS制作下拉导航菜单]
- 网页导航菜单弹出子菜单的制作
- 网页导航菜单制作——快，很快，非常快
- 网页导航菜单弹出子菜单的制作
- 网页制作实践 - 导航菜单
- jQuery制作的网页菜单导航
- 网页导航菜单制作
- 使用 jQuery 和 CSS3 制作滑动导航菜单
- 用CSS样式制作导航菜单
- 20个很酷的CSS3导航菜单制作教程
- jQuery弹性滑动导航菜单
- Android导航菜单横向左右滑动并和下方的控件实现联动
- css3的属性transition制作菜单导航
- ps制作导航菜单分隔线方法
- 使用CSS3制作立体效果的导航菜单
- 制作导航菜单分隔线的总结:用css3
- Android实现导航菜单左右滑动效果
- jQuery弹性滑动导航菜单
- CSS制作水平导航菜单效果
- css之导航菜单的制作