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