求助下。。朋友们进来帮忙下。看那种效果如何实现

像这种工具条是如何实现的呢？ 
用JS如何写呢？ 它隐藏的时候你们注意看下是直接往上移动 跟我们QQ空间工具栏一样，， 显示的时候  
隐藏后 
 显示的时候也是“往下移动”不管页面是拉到中间在隐藏还是顶部都一样。。 
这种如何实现呢？哪位朋友帮忙下急急急、、、、、、 

解决方案 »

  1.   

    第一张全图地址http://img1.phpwind.net/attachout/Mon_1002/3_1779723_e3722bbc61625c8.png第二张全图地址：http://img1.phpwind.net/attachout/Mon_1002/3_1779723_e84ae2bd9f81661.png
    哪位帮忙写个像这样的 万分感谢。
      

  2.   

    在顶部很简单的 
    position:fixed;z-index:9999
      

  3.   

    就是一个层的展开和关闭。。很简单。。
    jQuery版：
    $('#id').show();
    $('#id').hide();
    其它我就不写了。你自己写吧。。
      

  4.   

    显:display:block
    隐:display:none
      

  5.   


    我写了个 只是遮起来的。。而我是想实现那种效果 [size=24px] 跟QQ空间顶部工具那个效果一样[/size]
      

  6.   


    嗯 这个我知道。。但是你注意看到那图了没呢？
    第一张全图地址http://img1.phpwind.net/attachout/Mon_1002/3_1779723_e3722bbc61625c8.png第二张全图地址：http://img1.phpwind.net/attachout/Mon_1002/3_1779723_e84ae2bd9f81661.png
      

  7.   

    提供一种思路吧，效果多少还是有差别的。<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>无标题文档</title>
    <script src="jquery-1.3.2.min.js"></script>
    <script>
    $(function(){
    $("#touchdiv").mouseover(function(){

    $("#maindiv").animate({left:"0px",height:"100px"},2000);
    }).mouseout(function(){

    //$("#maindiv").animate({left:"0px",height:"100px"},2000);
    })})
    </script>
    <style>
    #touchdiv{ background-color:#999999; border:1px #000000 solid; width:500px; height:200px;}
    #maindiv{ background-color:#000099; border: 1px #00FF00 solid; width:500px; height:0px; position:absolute; left:0px; top:0px;}
    </style>
    </head>
    <body>
    <div id="touchdiv">移动你的鼠标到这里</div>
    <div id="maindiv"></div>
    </body>
    </html>
      

  8.   

    jquery版$("#div1").slideDown(1000);//从上往下逐渐显示层，里面的参数为时间，单位为毫秒，意思是从隐藏到完全显示需要的时间，可以随意设置
    $("#div1").slideUp(1000);//同上，从下往上，直到完全隐藏