用javascript仿163首页的广告收缩效果~~~~~~

最新推荐文章于 2024-10-02 05:39:15 发布

齐雪松

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量463

点赞数 1

文章标签： javascript function div

本文链接：https://blog.csdn.net/qxs101307204/article/details/7330211

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿163首页的广告收缩效果</title>
<style>
#top{
position:relative;
}
#content{
position:absolute;
}

</style>
</head>
<body style="margin:0px 0px" onLoad="moveDown()">
<div id="top" style="width:100%;height:300px;background-color:#0FF">网页的广告部分
</div>
<div id="content" style="width:100%;height:500px;background-color:#F99">这是网页的正文部分
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
   //定义要移动的距离
   var h=0;
   var maxheight=300;
   var st;
    //定义让广告部分展开
var top=document.getElementById("top");
//初始时，设置top为隐藏状态
top.style.display="none";
    function moveDown(){
    //累加
    h+=2;
    //设置高度等于我们累加的值

   top.style.height=h;
   top.style.display="block";
   //判断是否到最大
     if(h<=maxheight){
   st=setTimeout("moveDown()",50);

   }else{
    clearTimeout(st);
    //延迟3秒，开台收缩
   setTimeout("moveUp()",3000);
    }
   }
   //定义让广告部分收缩
   function moveUp(){
    h-=2;
    //设置高度等于我们累加的值
    top.style.height=h;
    //设置层显示
    top.style.display="block";

     if(h<=0){

   top.style.display="none";
   //清空定时器
   clearTimeout(st);
   }else{

    //如果h>0继续收缩
    st=setTimeout("moveUp()",50);
    }
    }
</script>