<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间版运动框架</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#box{
100px;
height: 100px;
background: red;
margin-left:50px ;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="application/javascript">
var oBox = document.getElementById('box');
move(oBox,'marginLeft','500px',500);
function move(obj , attr , target , time){
var endVal = parseInt(target);
var startVal = parseInt( getStyle(obj , attr) );
var startTime =new Date();
// endTime -startTinme = 2000
var timer = setInterval(function(){
var nowTime = new Date();
var prop = (nowTime - startTime) /time;
if(prop>=1){
prop =1 ;
clearInterval();
}
var s = prop*(endVal - startVal) +startVal;
obj.style[attr] = s + 'px';
},13);
function getStyle(obj,attr){
return obj.currentStyle?ojb.currentStyle[attr]:getComputedStyle(obj)[attr];
}
}
</script>
</body>
</html>