顶部可收缩可关闭广告

昨天搞了好久终于实现了下面的这个效果，顶部可收缩可关闭广告
如下图所示（点击关闭的时候广告会慢慢向上滑动隐藏）

放到这里与大家分享下。

<html>
<head>
<script language="javascript">
function checktopAds()
{
  
return true;  
}
function do_it()
{
  if ( checktopAds() )
  {
  var anim = function()
    {
      n += 5;
        if(n >= 45){
        document.getElementById('topAds_chk_show').style.marginTop = "0";
        window.clearInterval(t1);
        }else{
        document.getElementById('topAds_chk_show').style.marginTop = "-"+(45 - n)+"px";
        }
      },n=0;
      var t1 = window.setInterval(anim,80);
    }
}
function close_chk_show()
{
  var anim = function()
  {
    n += 5;
    if(n >= 45){
    document.getElementById('topAds_chk_show').style.marginTop = "-45px";
    window.clearInterval(t1);
    }else{
    document.getElementById('topAds_chk_show').style.marginTop = "-"+ n +"px";
    }
  },n=0;
    var t1 = window.setInterval(anim,80);
}
</script>
</head>
<body>
<div id="topAds_chk_show" style="margin-top:0px; margin-bottom:0px; width:770px; display:block;">
<a href="http://www.cbiw.com.cn/wenjuan/mrdati.asp" target="_blank"><img src="http://www.cbiw.com.cn/images/topAds.gif" width="652" height="45" border="0" /></a><a href="javascript:close_chk_show();"><img src="http://www.cbiw.com.cn/images/topAds2.gif" width="118" height="45" border="0" alt="关闭" /></a>
</div>
</body>
<html>

提示：您可以先修改部分代码再运行
最重要的就是代码中的那段JS代码，你可以独立出来保存为.js文件，然后直接调用。
http://www.visc.cn/blog/post/topAds.html

posted on 2007-04-14 09:44 mbskys 阅读(481) 评论(1) 收藏举报