<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>模仿QQ的滚动菜单效果</title>
<style type="text/css">
.titleStyle{
background-color:#FFC0FF; color:#000000; border-top:1px solid #FFFFFF; font-size:9pt; cursor:hand;
} .contentStyle{ background-color:#FFF0FF; color:#666699; font-size:9pt; } a{ color:#666699; } body{ font-size:9pt; }
</style> </head><body><script language="JavaScript"><!--var layerTop=20; //topvar layerLeft=20; //leftvar layerWidth=140; //total widthvar titleHeight=20; //title heightvar contentHeight=260; //contend heightvar stepNo=20; //step novar itemNo=0;runtimes=0;document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #ffc0ff;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" valign="top">' +itemContent +'</td></tr></table></div>'; document.write(itemHTML); itemNo++;}//all contendaddItem('Welcome','<BR> welcome！');addItem('栏目1','<BR><center><a href="#">子菜单A1</a> <BR><BR><a href="#">子菜单A2</a> <BR><BR><a href="#">子菜单A3</a> <BR><BR><a href="#">更多</a></center>');addItem('栏目2','<BR><center><a href="#">子菜单B1 </a> <BR><BR><a href="#">子菜单B2</a> <BR><BR><a href="#">子菜单B3</a> <BR><BR><a href="#">更多..</a></center>');addItem('栏目3','<BR><center><a href="#">子菜单C1</a> <BR><BR><a href="#">子菜单C2</a> <BR><BR><a href="#">子菜单B3</a> <BR><BR><a href="#">更多..</a></center>');addItem('栏目4','<BR><center><a href="#">子菜单D1</a> <BR><BR><a href="#">子菜单D2</a> <BR><BR><a href="#">更多..</a></center>');addItem('栏目5','<BR><center><a href="#">子菜单E1</a></center>');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></body></html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。