JavaScript函数封装--缓动动画(不支持'回到顶部'的动画的过渡)

函数封装

 // obj:盒子对象
 // target:目标位置
 // time:运动时间
 // callback:回调函数
 function move(obj,target,time,callback){
	// 清除定时器,防止多次点击加快移动速度和创建新的定时器
	clearInterval(obj.timer)
	// 结束
	obj.timer = setInterval(function(){
		// 缓动动画原理
		// (目标位置-现在位置)/10
		var step = (target - obj.offsetLeft) / 10;
		step  = step > 0 ?Math.ceil(step) : Math.floor(step)
		// 步行算法结束
		if(obj.offsetLeft == target){
			clearInterval(obj.timer)
			// 回调函数,如果有就执行,如果没有就不执行
			if(callback){
				callback()
			}
			// 回调函数结束
		}
		obj.style.left = obj.offsetLeft + step +'px'
	},time)
}

如何使用函数

// 中间的px和ms只是告诉你单位,在调用函数的时候不需要添加上去
// 如果函数名出现冲突,可以按照个人喜好修改
// 例如:function animateMove(){}等等
move(obj,___px,___ms)