运动函数封装及应用

运动函数封装例子

HTML

<input type="button"  id="forward" value="向前" />
<input type="button"  id="backward" value="向后" />
<div class="div"></div>

CSS

*{
	margin: 0;
	padding: 0;
}
input{
	margin-left: 20px;
}
.div{
	width: 50px;
	height: 50px;
	background: red;
	border: 1px solid #000;
	margin-top: 10px;
	position: absolute;
	left: 20px;
	top: 20px;
}

JS

var forWard=document.getElementById("forward");
var backWard=document.getElementById("backward");
var oDiv=document.getElementsByTagName("div")[0];

//向前进
forWard.onclick=function(){
	moveTo(oDiv,"top",500,10);
}
//向后退
backWard.onclick=function(){
	moveTo(oDiv,"top",20,10);
}

//obj:元素
//attr:属性
//target:运动的目标点
//dir:增长值
//endFn：完成运动后要执行的函数
function moveTo(obj,attr,target,dir,endFn){
	clearInterval(obj.timer);
	//解决dir正负的问题:当原始值小于目标值时dir为正值，否则为负值
	dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
	obj.timer=setInterval(function(){
		var speed=parseInt(getStyle(obj,attr))+dir;//步长
		//当元素到达目标点时，停在目标点停止运动
		if(speed>target&&dir>0||speed<target&&dir<0){
			speed=target;
		}
		obj.style[attr]=speed+"px";
		
		//清除定时器
		if(speed==target){
			clearInterval(obj.timer);
			if(endFn){
				endFn();
			}
		}
	},30)
}

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