JavaScript运动框架之速度时间版本

function getStyle(obj,attr){
	return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}

var box = document.getElementById("box");
var speed = 0; //步长
var target = 600;
var timer = null;
timer = setInterval(function(){
	var curr = parseInt(getStyle(box,"left")); //去除getStyle(box,"left")的单位
	if(curr == target){
		clearInterval(timer);
		speed = 0;
		alert("运动结束");
	}else{
		speed +=10;
		box.style.left = speed + "px";
	}
	

},1000/30);

//监控left的值的变化 怎么样拿到left的值
//alert(getComputedStyle(box)["width"]);
//alert(box.currentStyle["left"]);
// currentStyle --IE 
// getComputedStyle -- 非IE

function getStyle(obj,attr){
	return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}

var ball = document.getElementById("ball");

ball.onmouseover = function(){
	//同时变换 用的最多
	//move(this,"width",500,10);
	//move(this,"height",500,10);
	move(ball,{"width":400,"height":300},10);
}
ball.onmouseout = function(){
	//move(this,"width",100,-10);
	//move(this,"height",100,-10);
	move(ball,{"width":100,"height":100},-10);
}
function move(obj,json,speed){
	clearInterval(obj.timer);
	var mark = true;
	obj.timer = setInterval(function(){
		for(var attr in json){
			var curr = parseInt(getStyle(obj,attr));
			var target = json[attr];
			if(curr != target){
				obj.style[attr] = curr+speed+"px";
				mark = false;
		  }
		}
		if(mark){
			clearInterval(obj.timer);
		}
	},1000/30);
}


function getStyle(obj,attr){
	return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}

var ball = document.getElementById("ball");
ball.onmouseover = function(){
	move(ball,{"width":300,"height":300,"opacity":0.3});
}
//			ball.onmouseout = function(){
//				move(ball,{"width":100,"height":100},-10);
//			}
function move(obj,json){
	clearInterval(obj.timer);
	var mark = true;
	obj.timer = setInterval(function(){
		for(var attr in json){
			var curr = null;
			var target = json[attr];
			var speed = null;
			if(attr == "opacity"){
				curr = getStyle(obj,attr)*100;
				speed = (target*100-curr)*0.15;
			}else {
				curr = parseInt(getStyle(obj,attr));
				speed = (target - curr)*0.15;
			}
			speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
			if(curr != target){
				if(attr == "opacity"){
					obj.style[attr] = (curr+speed)/100;
				}else {
					obj.style[attr] = curr+speed+"px";
				}
				
				mark = false;
		  }
		}
		if(mark){
			clearInterval(obj.timer);
		}
	},1000/30);
}


function getStyle(obj,attr){
	return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}

var box1 = document.getElementById("box1");
var ball = document.getElementById("ball");

box1.onmouseover = function(){
  move(this,"left",0,10);
}
box1.onmouseout = function(){
  move(this,"left",-100,-10);
}
//问题一：当需要两个动画的时候，会执行后面一个，解决办法如下，回调函数
ball.onmouseover = function(){
  //同时变换 用的最多
  //move(this,"width",500,10);
  //move(this,"height",500,10);
  //列队在执行
  move(ball,"width",500,10,function(){
    move(ball,"height",500,10);
  });
}
ball.onmouseout = function(){
  //move(this,"width",100,-10);
  //move(this,"height",100,-10);
  move(ball,"width",100,-10,function(){
    move(ball,"height",100,-10);
  });
}
var timer = null;
function move(obj,attr,target,speed,callback){
  clearInterval(timer); //obj.timer缓存到各自的obj下
  timer = setInterval(function(){
    var curr = parseInt(getStyle(obj,attr));
    if(curr == target){
      clearInterval(timer);
      callback && callback();
    }else {
      obj.style[attr] = curr+speed+"px";
    }
  },1000/30);
}




function getStyle(obj,attr){
  return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}