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 ...
随机推荐
- kafka-manager安装
代码地址: https://github.com/yahoo/kafka-manager 注意只能使用 Java 7!Java 6 编译不通过,Java 8 在运行的时候会报错:java.lang.U ...
- 重读LPTHW-Lesson1-14
1.python print 可以用"Hello World",也可以用'Hello World',或者”””Hello World ””” 2.要打印在一行,可以在改行后加英文逗 ...
- Integer和Integer数据的大小比较
public class Test{ public static void main(String[] args){ Integer i1 = 100; Integer i2 = 100; if(i1 ...
- postgresql的psql命令
1:不进入数据库而执行SQL命令,用参数-c 2:把SQL命令保存在一个外部文件中,用 -f 参数导入并执行 a1.txt文件内容 select * from student; 在shell中用如下命 ...
- rpm包制作
ubuntu下先下载sudo apt-get install rpm就行了. 然后测试下rpm和rpmbuild命令都是存在的.好了,OK. rpm安装包的制作有严格的自定义的路径,这个路径是在/us ...
- logstash nginx 访问日志
log_format main '$remote_addr [$time_local] "$request" ' '$request_body $status $body_byte ...
- Linux系统启动过程介绍
Linux系统启动过程介绍 学习操作系统有必要了解一下系统的启动过程,这样在面对各种系统故障的时候能快速定位解决问题,下面以Centos来分析linux系统的启动过程. 1.BIOS自检:当开机的时候 ...
- cc150 Chapter 2 | Linked Lists 2.5 add two integer LinkedList, return LinkedList as a sum
2.5 You have two numbers represented by a linked list, where each node contains a single digit. The ...
- Zookeeper 3、Zookeeper工作原理（详细）
1.Zookeeper的角色 » 领导者(leader),负责进行投票的发起和决议,更新系统状态 » 学习者(learner),包括跟随者(follower)和观察者(observer),follow ...
- 【转】使用 udev 高效、动态地管理 Linux 设备文件
简介: 本文以通俗的方法阐述 udev 及相关术语的概念.udev 的配置文件和规则文件,然后以 Red Hat Enterprise Server 为平台演示一些管理设备文件和查询设备信息的实例.本 ...