javascript问题:如何实现像QQ好友分类一样的滑动菜单效果?

你不懂搜索一下吗？http://www.zzsky.cn/effect/content/1050.htm

解决方案 »

  1.   

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title></title> 
    <style type="text/css"> 
    .titleStyle{ 
    background-color:#aed8fb;color:#000; font-weight:bold; border-top:1px solid #FFF;font-size:9pt;cursor:pointer; 
    } 
    .contentStyle{ 
    background-color:#f4f3f3; cursor:pointer;
    }.lc_nav{
    width:185px;
    height:225px;
    padding-top:5px;
    }
    .lc_nav li{
    width:185px;
    height:25px;
    border-bottom:1px solid #fff;
    text-align:left;
    list-style:none;
    padding-top:10px;
    }a.l_blue12:link {
    font-family:"宋体";
    font-size:12px;
    color:#073892;
    text-decoration: none;
    }
    a.l_blue12:visited {
    font-family:"宋体";
    font-size:12px;
    color:#073892;
    text-decoration: none;
    }
    a.l_blue12:hover {
    font-family:"宋体";
    font-size:12px;
    color:#073892;
    text-decoration: underline;
    }
    a.l_blue12:active {
    font-family:"宋体";
    font-size:12px;
    color:#073892;
    text-decoration: none;
    }</style> 
    </head> 
    <body><script language="JavaScript"> 
    <!-- 
    var layerWidth=185; //菜单总宽 
    var titleHeight=35; //标题栏高度 
    var contentHeight=230; //内容区高度 
    var stepNo=10; //移动步数，数值越大移动越慢var itemNo=0;runtimes=0; 
    document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:0;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('合同范本','<div class="lc_nav"><li><a href="#" class="l_blue12">运输合同</a></li><li><a href="#" class="l_blue12">买卖合同</a></li><li><a href="#" class="l_blue12">劳动合同</a></li><li><a href="#" class="l_blue12">租赁合同</a></li><li><a href="#" class="l_blue12">承包经营合同</a></li><li><a href="#" class="l_blue12">赠与合同</a></li><li><a href="#" class="l_blue12">代理合同</a></li><li><a href="#" class="l_blue12">知识产权合同</a></li></div>'); 
    addItem('法律法规','<div class="lc_nav"><li><a href="#" class="l_blue12">全国人大法律库</a></li><li><a href="#" class="l_blue12">国务院行政法规</a></li><li><a href="#" class="l_blue12">地方性法规</a></li><li><a href="#" class="l_blue12">两高司法解释</a></li><li><a href="#" class="l_blue12">部委行业法律法规</a></li><li><a href="#" class="l_blue12">新法快递</a></li></div>'); 
    addItem('诉讼指南','<div class="lc_nav"><li><a href="#" class="l_blue12">起诉和受理</a></li><li><a href="#" class="l_blue12">聘请律师</a></li><li><a href="#" class="l_blue12">管辖</a></li></div>'); 
    addItem('法律常识','<div class="lc_nav"><li><a href="#" class="l_blue12">婚姻家庭/遗产分割 </a></li><li><a href="#" class="l_blue12">购房/租房/物业</a></li><li><a href="#" class="l_blue12">劳动人事</a></li><li><a href="#" class="l_blue12">消费者权益保护</a></li><li><a href="#" class="l_blue12">医疗事故/交通事故</a></li><li><a href="#" class="l_blue12">借代纠纷</a></li><li><a href="#" class="l_blue12">行政违法</a></li><li><a href="#" class="l_blue12">刑事犯罪</a></li></div>'); 
    addItem('法律文书','<div class="lc_nav"><li><a href="#" class="l_blue12">民事法律文书</a></li><li><a href="#" class="l_blue12">刑事法律文书</a></li><li><a href="#" class="l_blue12">行政法律文书</a></li><li><a href="#" class="l_blue12">非诉讼法律文书</a></li><li><a href="#" class="l_blue12">仲裁法律文书</a></li><li><a href="#" class="l_blue12">其它法律文书</a></li></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> 
    </body> 
    </html>
      

  2.   

    http://www.scriptlover.com/controls/AccControl/
      

  3.   

    http://www.scriptlover.com/controls/AccControl/
      

  4.   

    http://download.csdn.net/source/700042
    用javascript代码实现简单的qq菜单效果，仅供学习实用，带有注释。