请问怎么用javascirpt 实现像qq里的好友那样的上下滚动!

<SCRIPT LANGUAGE="JAVASCRIPT">
OB_Top=0; //position from top (px)
OB_Left=0; //position from left (px)
OB_Margin=10; //top and bottom margins between icons and borders
OB_Width=110; //bar width
OB_Height=550; //bar height
OB_SlideSpeed=1.85; //speed during slide movement
OB_BackgroundColor="#d31e1e"; //background color of the bar
OB_ItemsSpacing=30; //space between two items (icons and text)
OB_BorderWidth=3; //border width
OB_BorderStyle="ridge"; //border style
OB_BorderColor="#d31e1e"; //border color
OB_IconsWidth=32; //icons width
OB_IconsHeight=32; //icons height
OB_ButtonFontFamily="宋体";     //font family of button characters
OB_ButtonFontSize=9; //font size    "         "       "  
OB_ButtonFontColor="black"; //font color   "         "       "     
OB_ButtonHeight=25; //button height
OB_LabelFontFamily="宋体"; //font family of text labels
OB_LabelFontSize=9; //font size    "   "   "   "
OB_LabelFontColor="white"; //font color   "   "   "   "
OB_LabelMargin=3; //margin between labels and icons
OB_UpArrow="images/arrowup.gif"; //arrow for slide up
OB_DownArrow="images/arrowdown.gif"; //arrow for slide up
OB_ArrowWidth=15; //arrow width
OB_ArrowHeight=15; //arrow height
OB_ArrowSlideSpeed=8; //speed for items scrolling
        OB_TextLeft=60;
</SCRIPT>
<SCRIPT LANGUAGE="JAVASCRIPT">
if (document.all){OutBarFolder1=new Array(
"个人办公",

 "25.gif","事务提醒","office/awake.php","",
 
 "34.gif","內部通信","office/sendmessage.php","",
 
 "2.gif","日程安排","office/dateplan.php","",
 
"43.gif","领导办公","lingdao/missionindex.php","",

"3.gif","公司通讯录","office/connection.php","",

"4.gif","个人通讯录","office/userconnindex.php","",

"1.gif","个人资料","office/udetailindex.php","",
 
"36.gif","桌面设定","office/setstyle.php","",
 "","","",""); OutBarFolder2=new Array(
"工作任务",

"22.gif","任务安排","mission/jobadmin.php","",

"20.gif","任务处理","mission/lookover.php","",

"42.gif","工作总结","mission/zongjie.php","",

"21.gif","工作日志","mission/joblogindex.php","",

"19.gif","日志清理","mission/dellogindex.php","",

"18.gif","值班管理","mission/ondutyindex.php","",
"","","",""
);OutBarFolder3=new Array(
"客户管理",

"38.gif","客户资料","kehu/zhiliaoindex.php","",

"39.gif","客户跟踪","kehu/kehugengzhong.php","",

"40.gif","客户服务","kehu/kehufuwu.php","",

"23.gif","工作接待","mission/receiveindex.php","",

"41.gif","业务统计","kehu/tongji.php","",
"","","",""
);OutBarFolder4=new Array(
"电子公文",

"15.gif","待办公文","elintdoc/waitindex.php","",

"13.gif","新发公文","elintdoc/sendindex.php","",

"17.gif","流程监控","elintdoc/controlindex.php","",

"14.gif","催办公文","elintdoc/hurryindex.php","",

"16.gif","公文查阅","elintdoc/readindex.php","",
"","","",""
);OutBarFolder5=new Array(
"公共信息",

"10.gif","最新公告","placard/newindex.php","",

"11.gif","历史公告","placard/historyindex.php","",

"9.gif","签发公告","placard/endorseindex.php","",

"12.gif","政策法规","placard/statuteindex.php","",

"30.gif","法规制度","OAadmin/policyindex.php","",
"","","",""
);OutBarFolder6=new Array(
"文档管理",

"5.gif","我的文档","files/mydocframe.php","",

"6.gif","部门文件","files/gdocframe.php","",

"7.gif","共享文档","files/sdocframe.php","",

"37.gif","技术资料","files/jishudocframe.php","",

"8.gif","文件上传","files/ftpfile.php","",
"","","",""
);OutBarFolder7=new Array(
"营运资源",

"29.gif","物品借用","commserve/lendapplyindex.php","",

"33.gif","物品领用","commserve/applyindex.php","","24.gif","召开会议","commserve/meetingindex.php","",

"26.gif","用车申请","commserve/carindex.php","",
"","","",""
);OutBarFolder8=new Array(
"后台管理",

"27.gif","用户管理","OAadmin/userindex.php","",

"28.gif","部门管理","OAadmin/groupindex.php","",

"31.gif","功能描述","OAadmin/operationindex.php","",

"32.gif","职责权限","OAadmin/jobindex.php","",

"35.gif","数据备份","OAadmin/backupdb.php","",
"","","",""
);
//document.write('<script src="folders.js"><\/script>')
document.write('<script src="outbar.js"><\/script>')
}</SCRIPT>
<SCRIPT LANGUAGE="JAVASCRIPT">
function Run(app)
{
alert("Application : "+app);
}
</SCRIPT>

解决方案 »

  1.   

    另外一个
    <html>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
    <style type='text/css'>
    .folder1 {text-align:center; background: #00A4E1; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #FFFFFF #00BBFF; cursor: hand; font-size: 9pt}
    .folder2 {text-align:center; background: #20C1FF; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}
    .foldercont{background: #D9ECF4; border: 1px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt; cursor: default;}
    </style><SCRIPT LANGUAGE=javascript>
    onload=function(){
     var lstr = ""
     for (var i=0; i<30; i++) lstr+= "haha..<br>";
     var lofolder = new outlookfolder(null,335,100,15);
     lofolder.addfolder("菜单1","1..<br>2..");
     lofolder.addfolder("菜单2",lstr);
     lofolder.addfolder("菜单3");
     lofolder.addfolder("菜单4");
     lofolder.addfolder("菜单5");
     lofolder.showfolderX(0);
    }
         //[容器,高,宽,展开速度]
    function outlookfolder(aoP,aih,aiw,ait){
     if (aih==null) aih=200;
     if (aiw==null) aiw="100%";
     if (ait==null) ait=10;
     var loMain  = document.createElement("<span style='overflow:hidden;height:"+aih+";width:"+aiw+"'></span>");
        var lsUniqueID = loMain.uniqueID;
     var loSlide = document.createElement("span");
        loSlide.innerHTML = "<button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;width:10;height:10'></button><button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckdown()' style='position:absolute;display:none;width:10;height:10'></button>";
     var liContH = aih;
        if (aoP==null){
            document.body.appendChild(loMain);
            document.body.appendChild(loSlide);
        }else{
            aoP.appendChild(loMain);
            aoP.appendChild(loSlide);
        }
             //增加一个目录[名字,内容]
        loMain.addfolder = function(str,cont){
         var loPar = document.createElement("SPAN");
         loPar.innerHTML = "<span onclick='"+lsUniqueID+".showme(this)' style='overflow:hidden;width:100%;' class='folder1'></span><span style='position:relative;overflow:hidden;width:100%;height:1' class='foldercont'></span>";
      this.appendChild(loPar);
      loPar.children[0].innerHTML = (str==null?"　":str);
      loPar.children[1].innerHTML = (cont==null?"　":cont);
      liContH -= parseInt(loPar.children[0].offsetHeight);
        }
             //打开／关闭第x个目录夹
     loMain.showfolderX = function(aix){
      loMain.showme(loMain.children[aix].children[0])
     }
          //打开/关闭当前obj所在的目录
        loMain.showme = function(obj){
      if (loMain.moving) return;
      loMain.moving = true;
      if (obj.bOpen){
       obj.bOpen = false;
       loMain.closefolder(obj.parentElement.children[1]);
       obj.className = 'folder1';
      }else{
       obj.bOpen = true;
       loMain.openfolder(obj.parentElement.children[1]); 
       obj.className = 'folder2';
       var lxfolders = loMain.children;
       for (var i=0; i<lxfolders.length; i++){
        var loChild = lxfolders[i].children[0];
        if(loChild.uniqueID!=obj.uniqueID){
         lxfolders[i].children[1].style.height=1;
         loChild.bOpen = false;
         loChild.className = 'folder1';
        }
       }
      }
      loMain.SlideItemsAction(obj.parentElement.children[1]);
        }
             //为目录内容设置Slide
        var loSlideItem = null;
     var lbSlideing = false;
     loMain.SlideCilckdown = function(){  //向下滚动
      loSlideItem.scrollTop += 2;
      if (!lbSlideing&&loSlideItem.scrollTop<loSlideItem.scrollHeight) setTimeout(lsUniqueID+'.SlideCilckdown()',1)
     }
     loMain.SlideCilckup = function(){  //向上滚动
      loSlideItem.scrollTop -= 2;
      if (!lbSlideing&&loSlideItem.scrollTop>0) setTimeout(lsUniqueID+'.SlideCilckup()',1)
     }
     loMain.SlideClickStart = function(){ //允许开始滚动
      lbSlideing=false;
     }
     loMain.SlideClickStop = function(){  //强制停止滚动
      lbSlideing=true;
     }
        loMain.SlideItemsAction = function(obj){
      var loUp   = loSlide.children[0];
      var loDown = loSlide.children[1];
      if (obj.scrollHeight<=liContH||obj.parentElement.children[0].bOpen!=true){
       loUp.style.display="none";
       loDown.style.display="none";
      }else{
       loSlideItem = obj;
       var lxOffset = getTrueOffset(obj);
       var lileft = lxOffset[0]+obj.offsetWidth-20;
       var litop  = lxOffset[1]+obj.offsetHeight+5;
       with(loUp.style){
        display="";
        left=lileft;
        top=litop;
       }
       with(loDown.style){
        display="";
        left=lileft;
        top=litop+liContH-40;
       }
      }
        }
            //逐渐关闭obj所在的内容显示
     loMain.closefolder = function(obj,ai){
      if (ai==null) ai=liContH;
      if (ai<ait){ obj.style.height=1; ai=1}
      if (ai>1){
       obj.style.height = ai;
       ai -= ait;
       setTimeout(lsUniqueID+'.closefolder('+obj.uniqueID+','+ai+')',1)
       return;
      }
      loMain.moving = false;
     }
         //逐渐打开obj所在的内容显示
     loMain.openfolder = function(obj,ai){
      if (ai==null) ai=1;
      if (liContH>ai){
       obj.style.height = ai;
       ai += ait;
       setTimeout(lsUniqueID+'.openfolder('+obj.uniqueID+','+ai+')',1)
       return;
      }
      loMain.moving = false;
     }
     function getTrueOffset(e){
        var x=0; var y=0;
        if(!e)return [x,y];
        while(e){
          x+=parseInt(e.offsetLeft);
          y+=parseInt(e.offsetTop);
          e=e.offsetParent;
       }
       return [x,y];
      }
      return loMain;
    }
    </SCRIPT>
      

  2.   

    谢谢你啊 awaysrain(绝对零度),请问第一个的其他代码能不能贴出来,我想看看第一个的 效果!谢谢!
      

  3.   

    QQ
    http://www.51windows.net/myjs/?u=/hw/asp/jsview.asp?id=113
      

  4.   

    <head> 
    <STYLE>
    .a{display:none;}
    .b{display:block;}
    .c{BACKGROUND-COLOR: lightgrey;cursor:hand;}
    </STYLE>
    </head> 
    <table border =1 id="tb"> 
    <tr class="c"><td style="BACKGROUND-COLOR: lightgrey">好友</td></tr>
    <tr class="a"><td>好友</td></tr>
     <tr class="c"><td>陌生人</td></tr>
    <tr class="a"><td>陌生人</td></tr> 
    <tr class="c"><td>黑名单</td></tr>
    <tr class="a"><td>黑名单</td></tr> 
    </table> 
    <script> 
    function document.onclick(){ 
    var e=window.event.srcElement 
    if(e.className="c"){ 
    if(tb.rows(e.parentElement.rowIndex+1).className=="b")
    {tb.rows(e.parentElement.rowIndex+1).className="a"}
    else
    {tb.rows(e.parentElement.rowIndex+1).className="b"}
    }}
    </script>
      

  5.   

    wanghr100(灰豆宝宝.net) 里面没有上下滚的功能啊!
      

  6.   

    高人 awaysrain(绝对零度) 给的第二个例子里面有这个功能的,大家可以看看,但我想看看第一个例子效果是怎么样!
      

  7.   

    先更正一下
    <head> 
    <STYLE>
    .a{display:none;}
    .b{display:block;}
    .c{BACKGROUND-COLOR: lightgrey;cursor:hand;}
    </STYLE>
    </head> 
    <table border =1 id="tb"> 
    <tr><td class="c">好友</td></tr>
    <tr class="a"><td>好友</td></tr>
     <tr><td class="c">陌生人</td></tr>
    <tr class="a"><td>陌生人</td></tr> 
    <tr><td class="c">黑名单</td></tr>
    <tr class="a"><td>黑名单</td></tr> 
    </table> 
    <script> 
    function document.onclick(){ 
    var e=window.event.srcElement 
    if(e.className=="c"){ 
    if(tb.rows(e.parentElement.rowIndex+1).className=="b")
    {tb.rows(e.parentElement.rowIndex+1).className="a"}
    else
    {tb.rows(e.parentElement.rowIndex+1).className="b"}
    }}
    </script>
      

  8.   

    <head> 
    <STYLE>
    .a{display:none;}
    .b{display:block;}
    </STYLE>
    </head> 
    <table border =1 id="tb"> 
    <tr><td>好友1</td></tr>
    <tr><td>好友2</td></tr>
    <tr><td>好友3</td></tr>
    <tr><td>好友4</td></tr> 
    <tr><td>好友5</td></tr>
    <tr><td>好友6</td></tr>  
    </table>
    <button onclick="show(a-1);">↑</button>
    <button onclick="show(a+1);">↓</button>
    <script> 
    var a=0;
    show(a);
    function show(x)
    { 
    if(x<5&&x>-1)
    {
    for(i=0;i<tb.rows.length;i++){tb.rows(i).className='a';}
    for(i=x;i<x+2;i++){tb.rows(i).className='b';}
    a=x;
    }

    }
    </script>