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

<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>