JavaScript实现div宽、高自动缓慢拉伸
最近打算实现一个带有滤镜效果的地自动拉伸图片。发现使用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宽、高自动缓慢拉伸的更多相关文章
- vue 动态获取div宽高有时候为0的情况
项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => { }) ...
- css+background实现 图片宽高自适应，拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
- div宽高不确定，内容居中
当div的宽高不确定时候,内容居中:// 加在父级div中 垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:ce ...
- javascript 获取元素宽高
style.width,clientWidth,offsetWidth <!doctype html> <html> <head> <meta charset ...
- div宽高设置为百分比
如果你将div的width和height设置为百分比,但是发现页面都不见了,这是因为父标签也要设置为百分比,也就是说body和html的宽高也需要设置为百分比 #containter{ width:1 ...
- javascript获取网页宽高，屏幕宽高，屏幕分辨率等
<script> var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s + ...
- div 宽高相等2种实现方式
div.wh{ background:#ff0;width:50%;position:relative;display:inline-block; } div.wh:before{ content: ...
- 两栏自适应布局，右侧div宽高不定
.main,.sitebar{ height: 300px; font: bolder 20px/300px "微软雅黑"; color: bl ...
- 前端web设置div宽高一样
<div class="constant-width-to-height-ratio"></div> .constant-width-to-height-r ...
随机推荐
- Tomcat 服务器的端口号的修改
在系统中找到Tomcat安装目录下的conf文件夹下的servlet.xml文件. (1)在servlet.xml文件中找到以下代码: <connector port="8080&qu ...
- 详解一名合格PHP工程师应该具备的基本知识结构
在学习php时的一些小沉淀,供童鞋们欣赏哈.. 1.掌握语言本身的语法,熟悉常用类库是必须的: 2.面向对象最为当今的主流也是必须掌握的: 3.常用设计模式必须掌握,设计模式是前辈的总结.经验: 4. ...
- js经典代码技巧学习之一：使用三元运算符处理javascript兼容
window.Event = { add: function() { //使用条件表达式检测标准方法是否存在 return document.addEventListener ? function(a ...
- Oracle中index by binary_integer的作用
如语句:type numbers is table of number index by binary_integer;其作用是,加了”index by binary_integer ”后,num ...
- [C++程序设计]有默认参数的函数
实参与形参的结合是从左至右顺序进行的.因此指定默认值的参数必须放在形参表列中的最右端,否 则出错.例如: void f1(float a,int b=0,int c,char d=′a′); //不正 ...
- [原]用C#模拟实现扑克牌发牌、排序程序。
(1)52张扑克牌,四种花色(红桃.黑桃.方块和梅花),随机发牌给四个人. (2)最后将四个人的扑克牌包括花色打印在控制台上. 其中: 花色和点数用枚举类型实现 每张扑克牌用结构实 ...
- Ubuntu安装字体的方法
基本步骤如下: 1. 将要安装的字体放在一个文件夹下,以/home/UsrName/Download/Font为例 2.在终端中输入 sudo cp -r /home/UsrName/Download ...
- 移动端Web App自适应布局探索
1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...
- BZOJ NOI十连测 第一测 T1
思路:首先考虑t=1的情况,t等于1,那么所有位置的颜色相同,我们不用考虑概率的问题,那么,k+d*x在模d下都相等,我们考虑预处理一个数组s[i][j],代表d为i,起始位置为j的等差数列的和,这个 ...
- Linux系统编程（19）——正则表达式在sed和awk中的使用
sed意为流编辑器(Stream Editor),在Shell脚本和Makefile中作为过滤器使用非常普遍,也就是把前一个程序的输出引入sed的输入,经过一系列编辑命令转换为另一种格式输出.sed和 ...