JavaScript实现div宽、高自动缓慢拉伸

最新推荐文章于 2021-11-08 13:35:26 发布

weixin_30732487

最新推荐文章于 2021-11-08 13:35:26 发布

阅读量218

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dolphin-gjh/p/3534059.html

版权

最近打算实现一个带有滤镜效果的地自动拉伸图片。发现使用css3浏览器兼容性得需要特别关注。这里我使用js实现了一个div边框自动拉伸和缩小。源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
  #testDiv
  {
   width:200px;
   height:200px;
   border:1px solid red;
  }
  #statusShow
  {
   width:200px;
   height:200px;
   border:1px solid red;
  }
</style>
<script type="text/javascript">
  var addObj;
  var reduceObj;
  var testDiv;
  var divwidth;
  var divheight;
  function addRect()
  {
   divwidth=testDiv.clientWidth;
   divheight=testDiv.clientHeight;
   if(divwidth<=500&&divheight<=500)
   {
    divwidth+=1;
    divheight+=1;
    testDiv.style.width=divwidth+"px";
    testDiv.style.height=divheight+"px";
   }
  }
  function reduceRect()
  {
   divwidth=testDiv.clientWidth;
   divheight=testDiv.clientHeight;
   if(divwidth>=200&&divheight>=200)
   {
    divwidth-=1;
    divheight-=1;
    testDiv.style.width=divwidth+"px";
    testDiv.style.height=divheight+"px";
   }
  }
  window.οnlοad=function(){
   addObj=document.getElementById("add");
   reduceObj=document.getElementById("reduce");
   testDiv=document.getElementById("testDiv");
   addObj.οnclick=function(){
    setInterval(addRect,1);
   }
   reduceObj.οnclick=function(){
    setInterval(reduceRect,1);
   }
  }
</script>
</head>
<body>
<div id="testDiv">
</div>
<button id="add">增加</button>
<button id="reduce">减少</button>
</body>
</html>