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 ...
随机推荐
- vs2010中出现:程序管理器匹配不正确错误
http://bbs.csdn.net/topics/360074795 这是一篇csdn上的讨论帖,第15楼给出了正解
- [C++程序设计]用数组名作函数参数
1. 用数组元素作函数实参 #include <iostream> using namespace std; int max_value(int x, int max) { return ...
- SQLServer XML类型
SQL Server从2005起开始支持xml类型,这个数据类型对于后期的改变非常有用.一对多的关系在后期变成了多对多的关系,XML类型就是一个不错的选择. 1.创建测试数据 创建表 --创建表,包含 ...
- 用来控制 XML 序列化的属性
通过将下表中的属性应用于类和类成员,可以控制 XmlSerializer 序列化或反序列化该类的实例的方式.若要了解这些属性如何控制 XML 序列化,请参见使用属性控制 XML 序列化. 这些属性还可 ...
- LeeCode-Merge Sorted Array
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...
- uva 1589 by sixleaves
坑爹的模拟题目.自己对于这种比较复杂点得模拟题的能力概述还不够,还多加练习.贴别是做得时候一直再想如何检查车中间有没有棋子,炮中间有没有棋子.到网上参考别人的代码才发先这么简单的办法,自己尽然想不到. ...
- （转）ZOJ 3687 The Review Plan I(禁为排列)
The Review Plan I Time Limit: 5 Seconds Memory Limit: 65536 KB Michael takes the Discrete Mathe ...
- HDOJ-1018 Big Number
http://acm.hdu.edu.cn/showproblem.php?pid=1018 题意:给出一个数n,输出n的阶乘的位数 汗Σ( ° △ °|||)︴刚开始还准备上大数乘法 然而10000 ...
- (step6.1.3)hdu 1875(畅通工程再续——最小生成树)
题目大意:本题是中文题,可以直接在OJ上看 解题思路:最小生成树 1)本题的关键在于把二维的点转化成一维的点 for (i = 0; i < n; ++i) { scanf("%d%d ...
- Unity 调用android插件
1. Unity的Bundle Identifier必须和你的android报名一致 Activity和View的区别: Activity应该是一个展示页面,View是页面上一些按钮视图等等. 如何调 ...