最近打算实现一个带有滤镜效果的地自动拉伸图片。发现使用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中可见的宽和高。