DOM案例---经典的仿163首页伸缩广告

最新推荐文章于 2020-11-13 19:13:00 发布

拼GO

最新推荐文章于 2020-11-13 19:13:00 发布

阅读量446

点赞数

分类专栏： JS+AJAX+JQUERY 文章标签： function xhtml javascript html

本文链接：https://blog.csdn.net/wxlhlh001/article/details/7288856

版权

JS+AJAX+JQUERY 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 οnlοad="moveDown()" style="margin:0px; 0px;">
<div id="top" style="width:100%; height:100px; background-color:#F96">网页的广告部分<br>

网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<br>
网页的广告部分<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;
   //设置层显示
   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>

拼GO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM案例---经典的仿163首页伸缩广告

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">仿163首页的广告收缩效果#top{ position:relative;}#content{ position:absolute;} 网页的广告部分网页的广
复制链接

扫一扫

专栏目录