大众计算机学习网

专门提供各种电脑教程

JS使用定时器修改DIV的高度和宽度

Admin | 2015-5-31 6:11:11 | 被阅次数 | 4148

  一、div对象在页面中的标签如下

  <div id="GetDiv" style="border-width:1px; border-style:dotted; width:1000px; overflow:hidden;">
    这里是div里面的内容
  </div>

  二、JS代码如下

  function SetDiv()
  {
    var GetDiv = document.getElementById("GetDiv");
    //alert(GetDiv.getBoundingClientRect().left+","+GetDiv.getBoundingClientRect().top);
    var scale=GetDiv.offsetWidth/GetDiv.offsetHeight;//原来的DIV的高宽比例
    ChangeWH=setInterval("SetWH("+scale+")", 100);

  }
  function SetWH(scale)
  {
    var MoveSpeed=50;//每次改变的大小为N个像素
    var div1 = document.getElementById("GetDiv");
    var oldwidth = div1.offsetWidth;
    oldwidth = oldwidth-MoveSpeed;
    var oldheight = oldwidth/scale;
    if (oldwidth <= 100)
    {
      clearInterval(ChangeWH);//停止计时器
    }else
    {
      div1.style.width = oldwidth + "px";
      div1.style.height = oldheight + "px";
    }
  }