Js运动框架
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="div1" style="width: 100px;height: 100px;background: red;position: absolute;top:0;left: 0;"></div>
</body>
<script type="text/javascript">
function animate(ele,attr,value){
var speed;
var timer=null;
(function(){
clearInterval(timer);
timer=setInterval(function(){
var now=parseInt(ele.style[attr]);
speed=(value-now)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(now!=value){
ele.style[attr]=now+speed+'px';
}else{
clearInterval(timer);
}
},30);
})();
}
var div = document.getElementById("div1");
animate(div,'top',200);
animate(div,'left',100);
</script>
</html>
==============================更新一下==============================
上面那个还是太挫了，看下面这个：
var getStyle = function(obj,attr){
if(obj.style[attr]){
/*内联样式*/
return obj.style[attr];
}else if(obj.currentStyle){
/*IE*/
return obj.currentStyle[attr];
}else if(document.defaultView.getComputedStyle(obj)){
/*W3C*/
return document.defaultView.getComputedStyle(obj)[attr];
}else{
return null;
}
}
var startMove=function(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var stop = true;//停止变量
for(var attr in json){
/*计算属性当前值*/
var current = 0;
if(attr == 'opacity'){
current = parseInt(parseFloat(getstyle(obj,attr))*100);
}else{
current = parseInt(getstyle(obj,attr));
}
/*计算速度*/
var speed = (json[attr]-current)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
/*判断是否停止*/
if(current != json[attr]){
stop = false;
}
/*改变属性值*/
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(current+speed)+')';
obj.style.opacity = (current+speed)/100;
}else{
obj.style[attr] = current+speed+'px';
}
}
/*结束停止定时器*/
if( stop ) {
clearInterval( obj.timer );
if(fn){
fn();
}
}
},100);
}
