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 ...
随机推荐
- iOS应用拨打电话
方法一: 特点: 直接拨打, 不弹出提示. 并且, 拨打完以后, 留在通讯录中, 不返回到原来的应用. //拨打电话 - (void)callPhone:(NSString *)phoneNumber ...
- Unity轻量级依赖注入容器
一.前言 Unity是一个轻量级的可扩展的依赖注入容器,支持构造函数,属性和方法调用注入.在Nuget里安装unity
- codeforces 337C Quiz(贪心)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Quiz Manao is taking part in a quiz. The ...
- （原）Eclipse的java中文件读写
1 在<uses-sdk…/>下面添加permission <uses-sdk android:minSdkVersion="16" android:target ...
- JavaScript 类的封装以及实现
类的封装: JavaScript 不是一门面向对象的语言,也不支持类的封装,但是我们可以利用闭包函数的概念去实现类的封装. // 在 Function 内部声明一个闭包函数(对象方法) functio ...
- sql 添加约束
在表中添加约束,基本常用的有两种类型,一个是创建表时同时添加约束,另一个是创建好表通过修改表添加约束,在这里是创建表时同时添加约束,但是有两种不同的用写法. 在这里列举出一些创建约束的形式,共参考(均 ...
- 浅谈HashMap的实现原理
1. HashMap概述: HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变 ...
- Keil中如何消除UNCALLED SEGMENT，IGNORED FOR OVERLAY PROCESS警告
在Keil C中,如果没有显式调用到定义过的函数,就会出现这样的的警告.当出现这样的警告时,可以不用管,因为不影响其它部分.但是,我们知道,即使没有调用这个函数,Keil仍然把它编译连接进整个程序,不 ...
- C# attribute_特性
特性的定义:公共语言运行时允许添加类似关键字的描述声明,叫做attribute,它对程序中的元素进行标注,如类型.字段.方法.和属性等.attribute和.NetFramework文件的元数据保存在 ...
- Multiple outputs from T4 made easy – revisited » DamienG
Multiple outputs from T4 made easy – revisited » DamienG Multiple outputs from T4 made easy – revisi ...