最近打算实现一个带有滤镜效果的地自动拉伸图片。发现使用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.onload=function(){
   addObj=document.getElementById("add");
   reduceObj=document.getElementById("reduce");
   testDiv=document.getElementById("testDiv");
   addObj.onclick=function(){
    setInterval(addRect,1);
   }
   reduceObj.onclick=function(){
    setInterval(reduceRect,1);
   }
  }
 </script>
</head>
<body>
 <div id="testDiv">
 </div>
 <button id="add">增加</button>
 <button id="reduce">减少</button>
</body>
</html>

注意：这里在获取div的宽度和高度的时候使用的clientWidth和clientHeight属性，获取的是div中可见的宽和高。

JavaScript实现div宽、高自动缓慢拉伸的更多相关文章

  1. vue 动态获取div宽高有时候为0的情况

    项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => {    }) ...

  2. css+background实现 图片宽高自适应，拉伸裁剪不变形

    图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性.  下面咱们在网上找两张宽高不一样的照片:     No.1                                      ...

  3. div宽高不确定，内容居中

    当div的宽高不确定时候,内容居中:// 加在父级div中 垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:ce ...

  4. javascript 获取元素宽高

    style.width,clientWidth,offsetWidth <!doctype html> <html> <head> <meta charset ...

  5. div宽高设置为百分比

    如果你将div的width和height设置为百分比,但是发现页面都不见了,这是因为父标签也要设置为百分比,也就是说body和html的宽高也需要设置为百分比 #containter{ width:1 ...

  6. javascript获取网页宽高，屏幕宽高，屏幕分辨率等

    ​ <script> var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s + ...

  7. div 宽高相等2种实现方式

    div.wh{ background:#ff0;width:50%;position:relative;display:inline-block; } div.wh:before{ content: ...

  8. 两栏自适应布局，右侧div宽高不定

    .main,.sitebar{       height: 300px;       font: bolder 20px/300px "微软雅黑";       color: bl ...

  9. 前端web设置div宽高一样

    <div class="constant-width-to-height-ratio"></div> .constant-width-to-height-r ...

随机推荐

  1. setNeedsDisplay、layoutSubViews

    UIView的setNeedsDisplay和setNeedsLayout方法.首先两个方法都是异步执行的.而setNeedsDisplay会调 用自动调用drawRect方法,这样可以拿到UIGra ...

  2. for循环执行顺序

    for循环的执行顺序用如下表达式: for(expression1;expression2;expression3) { expression4; } 执行的顺序应该是: 1)第一次循环,即初始化循环 ...

  3. cherry-pick，revert和rebase使用的3-way合并策略

    git中的cherry-pick,revert和rebase都使用的是3-way合并策略,下面就来看看这3个方法使用的merge-base,ours和theirs分别是什么. cherry-pick ...

  4. php sscanf() 函数使用

    定义和用法 sscanf() 函数根据指定的格式解析来自一个字符串的输入. 如果只向该函数传递两个参数,数据将以数组的形式返回.否则,如果传递了额外的参数,那么被解析的数据会存储在这些参数中.如果区分 ...

  5. Ubunu下安装mongoDB

    mongoDB有两种安装模式: 1. 源码安装 wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.2.0.tgz tar zxvf ...

  6. Linux上使用Azure CLI来管理Azure

    在Windows上我们有强大的Powershell提供各种命令来管理Azure的服务,在Linux上微软提供了基于Node.JS的跨平台的Azure Command Line来帮助Linux用户来管理 ...

  7. png透明图片

    2. JS处理 使用DD_belatedPNG(http://www.dillerdesign.com/experiment/DD_belatedPNG/),可以很简单的对界面上所有的透明图片进行同一 ...

  8. 从QWidget继承的圆形进度条QRoundProgressBar，只有370行代码（别忘了有现成的QProgressDialog）

    是学习绘制控件的绝佳例子: http://blog.csdn.net/liang19890820/article/details/51957568 https://sourceforge.net/pr ...

  9. 新发现一个函数：GradientFill

    位于Msimg32.dll之中 https://msdn.microsoft.com/en-us/library/windows/desktop/dd144957(v=vs.85).aspx

  10. C# 伪造 referer 提交数据

    private string SendRequest(string account, string cardNumber, string cardPass) { string targetUrl = ...