封装步骤:1.创建函数
2.考虑参数
3.书写逻辑
4.考虑返回值
参数:运动的dom函数(el) 目标位置(target) 步长(step)
function move(el,target,step){
if(el.timer){
clearInterval(el.timer)
}
var start = el.offsetLeft;
//如果一开始就在目标位置就没有必要再进入定时器了
if (start == target) {
return
}
el.timer=setInterval(function(){
var start = box.offsetLeft
//修正步长
// 根据(当前位置与目标位置)相对关系 ,决定 step 的正负
//step的正负决定对象移动方向
if(target-start<0){
step = -1 * Math.abs(step)
}else if(target-start>0){
step = Math.abs(step)
}
if(Math.abs(target-start)<Math.abs(step)){
el.style.left=target+'px'
}else{
el.style.left=start+step+'px'
}
//达到终止情况停下来
if(start==target){
clearInterval(el.timer)
el.timer=null
}
},16.7)
}