JS滑动菜单

 

期待大家有更好的更稳定的公布出来！

 

<style type="text/css">
.titleStyle{
background:url(http://www.cnblogs.com/images/Manage/bg-bt-big.jpg) no-repeat; color:#000000;
}
.contentStyle{
background:url(http://www.cnblogs.com/images/Manage/bg-btlitle2.jpg) left bottom;
background-repeat:no-repeat; 
}

a.btl:link{
    font-family: "宋体";
    font-size: 12px;
    color: #1f578b;
    text-decoration: none;
    background-image: url(http://www.cnblogs.com/images/Manage/left-bt.gif);
    height: 25px;
    padding-top:2px;
    width: 197px;
}
a.btl:visited {
    font-family: "宋体";
    font-size: 12px;
    color: #1f578b;
    text-decoration: none;
    background-image: url(http://www.cnblogs.com/images/Manage/left-bt.gif);
    height: 25px;padding-top:2px;
    width: 197px;
}
a.btl:hover {
    font-family: "宋体";
    font-size: 12px;
    color: #FF9900;
    text-decoration: none;
    background-image: url(http://www.cnblogs.com/images/Manage/left-bt.gif);
    height: 25px;padding-top:2px;
    width: 197px;
}
a.bts:link{
    font-family: "宋体";
    font-size: 13px;
font-weight:bold;padding-top:2px;color:#333333;
    text-decoration: none;
    padding-top:2px;
    width: 197px;
}
a.bts:visited {
    font-family: "宋体";
    font-size: 13px;
font-weight:bold;padding-top:2px;color:#333333;
    text-decoration: none;
    width: 197px;
}
a.bts:hover {
    font-family: "宋体";
    font-size: 13px;
font-weight:bold;padding-top:2px;color:#333333;
    text-decoration: none;
    width: 197px;
}
p{margin:0px;padding:0px;}

.btbig1{font-size:13px;font-weight:bold;padding-top:10px;color:#333333;background: url(http://www.cnblogs.com/images/Manage/bg-bt-11.jpg) no-repeat; width:197px; height:37px;letter-spacing:1px;}
.btbig1on{font-size:13px;font-weight:bold;padding-top:10px;color:#333333;background: url(http://www.cnblogs.com/images/Manage/bg-bt-12.jpg) no-repeat;width:197px;height:37px;letter-spacing:1px;}
.btbig2{font-size:13px;color:#333333;font-weight:bold;padding-top:10px;background: url(http://www.cnblogs.com/images/Manage/bg-bt-21.jpg) no-repeat; width:197px; height:37px;letter-spacing:1px;}
.btbig2on{font-size:13px;font-weight:bold;padding-top:10px;color:#333333;background: url(http://www.cnblogs.com/images/Manage/bg-bt-22.jpg) no-repeat;width:197px;height:37px;letter-spacing:1px;}
.btbig3{font-size:13px;color:#333333;font-weight:bold;padding-top:10px;background: url(http://www.cnblogs.com/images/Manage/bg-bt-31.jpg) no-repeat; width:197px; height:37px;letter-spacing:1px;}
.btbig3on{font-size:13px;font-weight:bold;padding-top:10px;color:#333333;background: url(http://www.cnblogs.com/images/Manage/bg-bt-32.jpg) no-repeat;width:197px;height:37px;letter-spacing:1px;}
.btbig4{font-size:13px;color:#333333;font-weight:bold;padding-top:10px;background: url(http://www.cnblogs.com/images/Manage/bg-bt-41.jpg) no-repeat; width:197px; height:37px;letter-spacing:1px;}
.btbig4on{font-size:13px;font-weight:bold;padding-top:10px;color:#333333;background: url(http://www.cnblogs.com/images/Manage/bg-bt-42.jpg) no-repeat;width:197px;height:37px;letter-spacing:1px;}
.btbig5{font-size:13px;color:#333333;font-weight:bold;padding-top:10px;background: url(http://www.cnblogs.com/images/Manage/bg-bt-51.jpg) no-repeat; width:197px; height:37px;letter-spacing:1px;}
.btbig5on{font-size:13px;font-weight:bold;padding-top:10px;color:#333333;background: url(http://www.cnblogs.com/images/Manage/bg-bt-52.jpg) no-repeat;width:197px;height:37px;letter-spacing:1px;}
.btbig6{font-size:13px;color:#333333;font-weight:bold;padding-top:10px;background: url(http://www.cnblogs.com/images/Manage/bg-bt-61.jpg) no-repeat; width:197px; height:37px;letter-spacing:1px;}
.btbig6on{font-size:13px;font-weight:bold;padding-top:10px;color:#333333;background: url(http://www.cnblogs.com/images/Manage/bg-bt-62.jpg) no-repeat;width:197px;height:37px;
letter-spacing:1px;}

</style>




<script language="JavaScript">
<!--
var layerTop=92; //菜单顶边距
var layerLeft=0; //菜单左边距
var layerWidth=197; //菜单总宽
var titleHeight=37; //标题栏高度
var contentHeight=200; //内容区高度
var stepNo=10; //移动步数，数值越大移动越慢
var itemNo=0;runtimes=0;
document.write('<span id="itemsLayer" style="overflow:hidden;left:'+layerLeft+';top:'+layerTop+';'+layerWidth+';">');
function changecss(obj,css){
obj.className=css;//alert(obj.className);
}
function addItem(itemTitle,itemContent){
itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+' style="position:relative;left:0;top:'+(-contentHeight*itemNo)+';'+layerWidth+';"><table width=100% cellspacing="0" cellpadding="0">'+
'<tr><td height='+titleHeight+' onclick=changeItem('+itemNo+') class="titleStyle" align=center>'+itemTitle+'</td></tr>'+
'<tr><td height='+contentHeight+' valign="top" class="contentStyle">'+itemContent+'</td></tr></table></div>';
document.write(itemHTML);
itemNo++;
}
var banner1="btbig1",banner1on="btbig1on";
var banner2="btbig2",banner2on="btbig2on";
var banner3="btbig3",banner3on="btbig3on";
var banner4="btbig4",banner4on="btbig4on";
var banner5="btbig5",banner5on="btbig5on";
var banner6="btbig6",banner6on="btbig6on";
var css11="banner1on",css12="banner1";
var css21="banner2on",css22="banner2";
var css31="banner3on",css32="banner3";
var css41="banner4on",css42="banner4";
var css51="banner5on",css52="banner5";
var css61="banner6on",css62="banner6";
//添加菜单标题和内容，可任意多项，注意格式：
addItem('<p class="btbig1" onmouseover="changecss(this,'+css11+')" onmouseout="changecss(this,'+css12+')">信息</p>','<center><a href="javascript:void(0);" onclick="openurl(\'../CorpNews/ImportNewsInfo.aspx\');" target="_top" class="btl">新闻</a><a href="javascript:void(0);" onclick="openurl(\'../Report/ReportShow.aspx\');" target="_top" class="btl">报告</a><a href="javascript:void(0);" onclick="openurl(\'../Previse/PreviseMore.aspx\');" target="_top" class="btl">网络</a><a href="javascript:void(0);" onclick="openurl(\'../ht-wypl.aspx\');" target="_top" class="btl">评论</a><a href="javascript:void(0);" onclick="openurl(\'../Bolg.aspx\');" target="_top" class="btl">博客<a href="javascript:void(0);" onclick="openurl(\'../ValueData/ValueTool.aspx\');" target="_top" class="btl">价值</a></a><a href="javascript:void(0);" onclick="openurl(\'../RealTimeMarket/SeatInfo.aspx\');" target="_top" class="btl">数据</a><a href="../Report/ReportShow.aspx" target="_top" class="btl">资料</a></center>');
addItem('<p  class="btbig2" onmouseover="changecss(this,'+css21+')" onmouseout="changecss(this,'+css22+')">用户</p >','<center><a href="javascript:void(0);" onclick="openurl(\'../UserManage/UserManageShow.aspx\');" target="_top" class="btl">管理</a><a href="javascript:void(0);" onclick="openurl(\'../ht_zcyh.aspx\');" target="_top" class="btl">注册用户</a><a href="javascript:void(0);" onclick="openurl(\'../ht-fxszlk.aspx\');" target="_top" class="btl">模拟库</a><a href="javascript:void(0);" onclick="openurl(\'../ht-mtzlk.aspx\');" target="_top" class="btl">媒体</a><a href="javascript:void(0);" onclick="openurl(\'../ht-lxtx.aspx\');" target="_top" class="btl">提醒</a></center>');
addItem('<p class="btbig3" onmouseover="changecss(this,'+css31+')" onmouseout="changecss(this,'+css32+')">通讯录</p >','<center><a href="javascript:void(0);" onclick="openurl(\'../ht-txlgl.aspx\');" target="_top" class="btl">通讯录</a></center>');
addItem('<p class="btbig4" onmouseover="changecss(this,'+css41+')" onmouseout="changecss(this,'+css42+')">客户</p >','<center><a href="javascript:void(0);" onclick="openurl(\'../ht-dxqf.aspx\');" target="_top" class="btl">短信</a><a href="javascript:void(0);" onclick="openurl(\'../ht-yjqf.aspx\')" target="_top" class="btl">邮件</a><a href="../DataInfo/Repository.aspx?DirID=0" target="_top" class="btl">模板</a></center>');
addItem('<p class="btbig5" onmouseover="changecss(this,'+css51+')" onmouseout="changecss(this,'+css52+')">建设</p >','<center><a href="javascript:void(0);" onclick="openurl(\'../ht-dhhy.aspx\');" target="_top" class="btl">电话</a><a href="javascript:void(0);" onclick="openurl(\'../ht-wlhy.aspx\');" target="_top" class="btl">网络</a></center>');
addItem('<p class="btbig6" onmouseover="changecss(this,'+css61+')" onmouseout="changecss(this,'+css62+')">管理</p >','<center><a href="javascript:void(0);" onclick="openurl(\'../CorpNews/WebNewsInspectInfo.aspx\');" target="_top" class="btl">管理</a><a href="javascript:void(0);" onclick="openurl(\'../CompanyAffiche/AfficheInfo.aspx\');" target="_top" class="btl">管理</a><a href="javascript:void(0);" onclick="openurl(\'../Report/ReportInfo.aspx\');" target="_top" class="btl">管理</a><a href="javascript:void(0);" onclick="openurl(\'../InvestorQuestion/InvestorQueManage.aspx\');" target="_top" class="btl">管理</a><a href="javascript:void(0);" onclick="openurl(\'../FAQ/FAQManage.aspx\')" class="btl">管理</a></center>');

document.write('</span>');
document.getElementById("itemsLayer").style.height=itemNo*titleHeight+contentHeight;

var toItemIndex=itemNo-1;
var onItemIndex=itemNo-1;

function changeItem(clickItemIndex){
toItemIndex=clickItemIndex;
if(toItemIndex-onItemIndex>0) moveUp(); else moveDown();
runtimes++;
if(runtimes>=stepNo){
onItemIndex=toItemIndex;
runtimes=0;}
else
setTimeout("changeItem(toItemIndex)",10);
}

function moveUp(){
for(i=onItemIndex+1;i<=toItemIndex;i++)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');
}

function moveDown(){
for(i=onItemIndex;i>toItemIndex;i--)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');
}
changeItem(0);
//-->
</script>