最近打算实现一个带有滤镜效果的地自动拉伸图片。发现使用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. OAuth协议与第三方登录：（ＱＱ，百度，微信，微博）

    OAuth 相当于授权的U盾,提供第三方认证的协议,是个安全相关的协议,作用在于,使用户授权第三方的应用程序访问用户的web资源,并且不需要向第三方应用程序透露自己的密码. 传统互联网:应用于PC端, ...

  2. iOS学习资料整理

    视频教程(英文) 视频 简介 Developing iOS 7 Apps for iPhone and iPad 斯坦福开放教程之一, 课程主要讲解了一些 iOS 开发工具和 API 以及 iOS S ...

  3. 总结前端JQ常用的一些操作手法（慢慢完善）

    1.实例化Js一个object对象,把它当做类来用,事例是操作url的参数 function GetRequestCondition() { var url = window.location.hre ...

  4. java基础知识1

    58.线程的基本概念.线程的基本状态以及状态之间的关系线程指在程序执行过程中,能够执行程序代码的一个执行单位,每个程序至少都有一个线程,也就是程序本身.Java中的线程有四种状态分别是:运行.就绪.挂 ...

  5. (转)ubuntu 文件目录结构

    文件系统的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 1. 普通文件:如文本文件.C语言元代码.SHELL脚本.二进制的可执行文件等,可用 ...

  6. nginx+keepalived+tomcat之具体配置档

    前沿知识点: nginx负责负载均衡(反向代理) msm(memcached session manager)负责缓存会话信息,从而实现会话保持 所需包: nginx和memcached采用最新稳定版 ...

  7. oc语言--BLOCK和协议

    一.BOLCK (一)简介 BLOCK是什么?苹果推荐的类型,效率高,在运行中保存代码.用来封装和保存代码,有点像函数,BLOCK可以在任何时候执行. BOLCK和函数的相似性:(1)可以保存代码(2 ...

  8. linux----ulimit 限制

    ulimit -a 显示当前用户的各种限制. ulimit -n 的数值表示每个进程可以打开的文件数目. 一般情况下, ulimit -n 的数值是1024. 当进程打开的文件数目超过此限制时,该进程 ...

  9. 推荐大家一本学习php模式的书

    对我来讲,写程序不是码代码,不想只是简单的将类拿来调用,然后功能实现了,可是以后要做一些扩展或者是修改就要对代码大刀阔斧. 在网站的开发过程中,使用一些框架,团队就可以在一定的程度上,分工合作.但是当 ...

  10. Java程序员需要学习的知识点

    Java是全世界最受欢迎的3大编程语言之一,它可以开发出许多实用的WEB应用程序和桌面应用程序,更重要的一点,Java是跨平台的语言——编写一次,可以再任何地方运行.另外,Java也很容易入门,如果你 ...