js 图片拉伸实例

来源：互联网发布：微邦软件编辑：程序博客网时间：2024/05/21 09:59

<style>#top{position:relative;}#content{position:absolute;}</style>

<body onload="moveDown()" style="margin:0px; 0px;"><div id="top" style="width:100%; height:100px; background-color:#F96">网页的广告部分<br>网页的广告部分<br></div><div id="content" style="width:100%; height:500px; background-color:#FF9">这是网页的正文部分</div></body><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>