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

时间:2022-11-12 08:40:35

最近打算实现一个带有滤镜效果的地自动拉伸图片。发现使用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&plus;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. AJAX(JS&amp&semi;&amp&semi;JQ&amp&semi;&amp&semi;H5)

    一 AJAX的简介: AJAX是"Asynchronous Javascript And XML"(异步JavaScript和XML),通过后台与服务器实现少量的数据交换,可以使页 ...

  2. debian7 请把标有&OpenCurlyDoubleQuote;Debian GNU&sol;Linux 7&period;1&period;0 &lowbar;Wheezy&lowbar; - Official amd64 DVD Binary-1 20130615-23&colon;06”的盘片插入驱动器&OpenCurlyDoubleQuote;&sol;media&sol;cdrom&sol;”再按回车键

    有时候,在通过apt-get install 安装软件的时候,会出现: 更换介质:请把标有“Debian GNU/Linux 7.1.0 _Wheezy_ - Official amd64 DVD B ...

  3. VC&plus;&plus;6&period;0 显示行号

    通过VC6LineNumberAddin能够解决这个问题,方法如下. 一.下载该文件. 网上很多免费的. 二.使用方法:            [1]:打开VC++6.0,点击菜单“工具(Tools) ...

  4. Working with BeforeProperties and AfterProperties on SPItemEventReceiver

    As many of you know, event receivers are a great way to hook into various SharePoint events.  These ...

  5. springmvc&lpar;一&rpar; springmvc框架原理分析和简单入门程序

    springmvc这个框架真的非常简单,感觉比struts2还更简单,好好沉淀下来学习~ --WH 一.什么是springmvc? 我们知道三层架构的思想,并且如果你知道ssh的话,就会更加透彻的理解 ...

  6. 利用wireshark任意获取qq好友IP实施精准定位

    没事玩一把,感觉还挺有趣,首先打开wireshark: 不管你连接的什么网,如图我连接的是WLAN,双击进入如图界面: ctrl-f进行搜索:如图 选择分组详情,字符串,并输入020048.这时候你就 ...

  7. C&plus;&plus;第二课:指针常用法&lbrack;个人见解&rsqb;

    在小编这里,没有任何学习知识的顺序,写到的东西对初学者肯定是有用处的,前提,你真的把C语言学完的那些初学者. 在讲明指针的知识前,或许有人一直说不会指针你学不会C++,或者说你所学C++的深度,全凭你 ...

  8. selenium Python 总结一些工作中可能会经常使用到的API。

    selenium Python 总结一些工作中可能会经常使用到的API. 1.获取当前页面的Url 方法:current_url 实例:driver.current_url 2.获取元素坐标 方法:l ...

  9. C&num; Winform模仿百度日历

    想写博客不知道从何处开始,就从回忆开始吧. 第一个就从自定义日历控件开始 产生背景: 大概2015年时候有个项目要用到日历,用默认日历展示给用户看,用户毫不客气都说界面太丑,最好做成像百度日历那样方便 ...

  10. crontab修改默认编辑器

    crontab默认编辑器为nano 修改crontab默认编辑器为vi或者其他的编辑器 可以用命令select-editor修改 改为3或者4 再用crontab -e 就是vim打开了