<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
#box{
1000px;
height: 100px;
margin-left: 50px;
background: red;
}
</style>
</head>
<body>
<div id="box"> </div>
<script type="application/javascript">
var oBox = document.getElementById('box');
move(oBox,'width','300',5);
function move(obj,attr,target,speed){
//获取元素对象宽度
var Val = parseInt(getStyle(obj,attr));
var onOff=true;
if(Val > target){
speed =-speed;
onOff = false;
}
var timer = setInterval(function(){
Val+=speed;
if(onOff==false){
if(Val<=target){
Val = target;
clearInterval(timer);
}
}
else if(onOff==true)
{
if(Val>=target)
Val = target;
clearInterval(timer);
}
obj.style[attr] = Val+'px';
},13);
function getStyle(obj,attr){
return obj.currentStyle?ojb.currentStyle[attr]:getComputedStyle(obj)[attr];
}
}
</script>
</body>
</html>