左侧导航条的一种漂亮移动效果

王朝other·作者佚名 2006-01-09

.titleStyle { BORDER-TOP: #ffffff 1px solid; FONT-SIZE: 9pt; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #6b8fc8 ; background-image: url(../admin/images/bg_3.gif) }

.contentStyle { FONT-SIZE: 9pt; COLOR: red; BACKGROUND-COLOR: #D6DBF7}

TD { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 16pt }

A:link { COLOR: #000000; TEXT-DECORATION: none }

A:active { COLOR: #000000; TEXT-DECORATION: none }

A:visited { COLOR: #000000; TEXT-DECORATION: none }

A:hover { COLOR: #ff0000; TEXT-DECORATION: underline }

</STYLE>

<%if request.cookies("godbook")("shjianame")<>"" then%>

<!--

var layerTop=15; //菜单顶边距

var layerLeft=20; //菜单左边距

var layerWidth=160; //菜单总宽

var titleHeight=26; //标题栏高度

var contentHeight=150; //内容区高度

var stepNo=10; //移动步数，数值越大移动越慢

var itemNo=0;runtimes=0;

document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #183789;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">');

function addItem(itemTitle,itemContent){

itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+' style="position:relative;left:0;top:'+(-contentHeight*itemNo)+';width:'+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+' class="contentStyle">'+itemContent+'</td></tr></table></div>';

document.write(itemHTML);

itemNo++;

}

//添加菜单标题和内容，可任意多项，注意格式：

addItem('<b><font color="#ffffff"><a href="admin_index.asp" target=_top><font color="#ffffff">管理首页</font></a> | <a href="logout.asp" target="_top"><font color="#ffffff">退出</font></a></font></b>','<DIV STYLE="PADDING-LEFT:15px">☉ <a href="admin_right.asp?action=modify" target="right">管理我的商品</a> | <a href="admin_right.asp?action=addclass" target="right">添加</a><BR>☉ <a href="admin_right.asp?action=glnews" target="right">管理我的新闻</a> | <a href="admin_right.asp?action=addnews" target="right">添加</a><BR>☉ <a href="admin_right.asp?action=fk" target="right">查看我的留言</a><br>☉ <a href="admin_right.asp?action=mydindan" target="right">管理我的订单</a><br></DIV>');

addItem('<b><font color="#ffffff">信息修改</font></b>','<DIV STYLE="PADDING-LEFT:15px">☉ <a href="admin_right.asp?action=fkfs" target="right">付款方式修改</a><BR>☉ <a href="admin_right.asp?action=ps" target="right">配送说明修改</a><BR>☉ <a href="admin_right.asp?action=gong" target="right">修改我的公告</a><br></DIV>');

addItem('<b><font color="#ffffff">商家设置</font></b>','<DIV STYLE="PADDING-LEFT:15px">☉ <a href="admin_right.asp?action=myziliao" target="right">商家资料修改</a><br>☉ <a href="admin_right.asp?action=pass" target="right">商家密码修改</a><br>☉ <a href="admin_right.asp?action=url" target="right">商家二级域名</a><br>☉ <a href="admin_right.asp?action=logo" target="right">修改商家LOGO</a><br>☉ <a href="tjbb.asp" target="right">商品销售统计</a><br></DIV>');

document.write('</span>')

document.all.itemsLayer.style.height=itemNo*titleHeight+contentHeight;

toItemIndex=itemNo-1;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>

<%end if%>

</HEAD></HTML>