yahoo.com首页源代码太多太杂了，看不出来它怎么弄的，就自己写了一个简单的，说不定什么时候就有用。主要是通过控制容器的高度来实现的，高度减少时会有加速的过程，滑动的效果看起来更好看一些。在IE，Firefox，Opera下效果一致。演示页面

<style type="text/css">
body {
    margin: 0 auto auto auto;
    text-align: center;
}
#hide {
    height: 68px; width: 950px;
    text-align: right;
    font-family: Trebuchet MS, sans-serif;font-size:small;  
    background: #1A4B8E url(tp_top_bg.png) no-repeat;  
    background-position: bottom; 
    margin: 0 auto auto auto;
}
a:link,a:hover,a:visited,a:active {
    color:#ffffff; text-decoration:none;
}
</style>
<script language="javascript">
//定义div的高度height=counter，i为计数累加，i的平方要小于counter值
//因为height不能负数,这里i在0－8之间
var counter = 68 ;
var i = 0 ;
function hide(){
    //定义计数器，每隔100微秒触发一次startCounter()函数
    var myInterval=window.setInterval("startCounter()",100);
}
function startCounter(){
//点击以后把关闭链接的容器隐藏
document.getElementById("close_link").style.display = "none";
if(i < 9 && i >-1 ){
    //设置div的高度为counter减去i的平方，这样高度减少时会有一个加速平滑过程，而不是匀速
    document.getElementById("hide").style.height = counter-i*i;
    i++;
    //IE下，不能定义直接为height=0的高度，必须设置font-size的值为0
    document.getElementById("hide").style.fontSize = 0;

}
// i超过8或产生其他异常时，div隐藏
else {
    document.getElementById("hide").style.display = "none";     
}
}
</script>

<div id="hide"><div id="sample"><a href="#" onclick="hide();" id="close_link">Close</a></div></div>
<div id="haha"><img src="1.gif"></div>