Html自定义样式变速移动

自定义样式中的任意属性值的变化的函数封装

1.定义一个函数名

function moveStyles(element,obj){}

其中有三个形参分别是，element对象，obj对象。

2.编写函数体的一个大概思路

function moveStyles(element,obj,fn){
//设置一个定时器
element.way = setInterval(function(){
//设置一个开关使得样式都能够到达目标位置
var flag = true;
	//第一步先获取目标属性的值  target 是你的样式名 类型为字符串
	var value = window.getComputedStyle(element,null)[target];
	//但因为value的数据类型是一个字符串，所以要对其取整。
	value = parseInt(value);
	//第二步获取你的目标值
	var aim = obj[target];
	//第三步获取你每次移动的步数,这是为了达到变速移动的效果
	var step = (aim - value)/10；
	//当你的step是小数的时候需要对其取整
	step = step > 0 ? Math.ceil(step)  :  Math.floor(step);
	value += step
	//将第一次的移动距离给你的目标样式,如果是像素的话就要加上字符串 "px"
	element.style[target] = value + "px";
	//进行判断
	if(value != aim){
		//将我的开关关闭
		flag = false ;
	}
	if(false){
		clearInterval(element.way);
	}
}，10）;
} 

3. 完整的变速移动函数封装

// style是我传输的一个对象。
//{
	"width" : 100,  //100为我的目标值
	"top"   :  20   //20是我的top的目标值
//}
function moveStyles(element,style){
	clearInterval(element.way);
	element.way = setInterval(function(){
		// 定义一个开关,在循环开始的时候就将flag的值设置为true
		var flag = true;
		for(var key in style){
			//目标位置
			var move_x =style[key];
			// 当前位置
			var now = parseInt(getStyle(element,key));
			var step = (move_x - now)/10;
			step = step > 0 ? Math.ceil(step) : Math.floor(step);
			now += step;
			// 移动
			element.style[key] = now+"px";
		}
		if(now != move_x){
			//此时的flag是一个全局变量当没有到达目标位置时就会将flag设置为flase.
			flag = false;
		}
	}
	if(flag){
		clearInterval(element.way);
		}
	}
	//每 10 毫秒就会执行一次定时,就是将flag的值设置为true
},10)
}