JS实现防163首页的广告收缩效果

最新推荐文章于 2021-06-03 22:11:05 发布

honey_tao

最新推荐文章于 2021-06-03 22:11:05 发布

阅读量504

点赞数

文章标签： function div javascript

今天我们在老师带领下实现了4个JS程序.....就先晒一个把！

思路：
   1、得有两个DIV，分为上下两部分。上面div的id=top,下面正文部分id=content
   2、设置div的样式，并且让top的高度不断增加
   3、当top的高度增加到一定的时候，不再增加，延迟3秒
   4、把top部分进行收缩，当hight=0,停止收缩

<body οnlοad="moveDown()" style="margin:0px 0px" >
<div id="top" style="width:100%; height:300px; background-color:#F96">
这是网页广告部分<br>这是网页广告部分<br>这是网页广告部分<br>这是网页广告部分<br>
这是网页广告部分<br>这是网页广告部分<br>这是网页广告部分<br>这是网页广告部分<br>
</div>

<div id="content" style="width:100%; height:500px; background-color:#FF9">
这是网页正文部分</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+"px";
   //设置层显示
   top.style.display="block";

   //判断是否到最大
   if(h<=maxheight){
   st=setTimeout("moveDown()",50);

    }else{
    //alert("开始收缩");

    clearTimeout(st);
  //延迟三秒开始收缩
  setTimeout("moveUp()",3000);

     }

     }

   //定义让广告部分收缩‘
     function moveUp(){
   //设置
   h-=2;

    //设置层高度等于累加值
   top.style.height=h+"px";
   //设置层显示
   top.style.display="block";

   if(h<=0){

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

    }else{

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

     }
}
</script>