广告上下移动

最新推荐文章于 2024-08-03 17:05:14 发布

phpfengzikai

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量425

点赞数

本文链接：https://blog.csdn.net/phpfengzikai/article/details/7288698

版权

<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:220px; background-color:#C00;">广告部分<br>
广告部分<br>广告部分<br>广告部分<br>广告部分<br>广告部分<br>广告部分<br>广告部分<br>广告部分<br>广告部分<br>
</div>
<div id="content" style="width:100%; height:300px; background-color:#9C3">网页内容部分</div>

</body>
</html>
<script language="javascript" type="text/javascript">
//定义一个步长
var h=0; //定义要移动的距离
var maxheight=100;
var st;
var top=document.getElementById("top");
//初始使设置top为隐藏

//定义让广告部分展开
function moveDown(){
  top.style.display="none";
  //累加
  h+=2;
  //设置层显示
  //设置高度等于累加的值
  top.style.height=h;
  top.style.display="block";
  if(h<=maxheight){

   st=setTimeout("moveDown()",50);

   }else{
     clearTimeout(st);
   st=setTimeout("moveUp()",3000);

    }
  }
//定义让广告部分收缩
function moveUp(){
  //累减
  h-=2;

  //设置层显示
  //设置高度等于；累减的值
  top.style.height=h;
  //alert(h);
  top.style.display="block";
  if(h<=0){
   //如果小于0 隐藏
   top.style.display="none";
   clearTimeout(st);
   }else{
    //如果H 大于0 继续收缩
    st=setTimeout("moveUp()",10);
    }

  }

</script>

phpfengzikai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
广告上下移动

仿163首页图片收缩效果#top{ position:relative; /* 相当定位*/ }#content{ position:absolute; /* 绝对定位*/ }广告部分广告部分广告部分广告部分广告部分广告部分广告部分广告部分广告部分广告部分网页内容部分 //定义一个步长 var h=0; //定
复制链接

扫一扫