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）; } 完整的变速移动函数封装 // 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) }