今天还是来说昨天的小例子，昨天实现的效果就是点击按钮“向前”即往前相反则往后，那么需要细化的几个问题就是：代码可以简化以及可以用一个变量来控制方向直接来看js：
<script>
//兼容不同浏览器获取行间样式
function getStyle ( obj, attr ) {
return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
window.onload=function(){
var aBtn1=document.getElementById("btn1");
var aBtn2=document.getElementById("btn2");
var oBox=document.getElementById("box");
aBtn1.onclick=function(){
fn(oBox,"left",18,500)//当然这里的乐left是可以根据需求更改的
};
aBtn2.onclick=function(){
fn(oBox,"left",18,10)
};
function fn(obj,attr,dir,target){
clearInterval(obj.timer);//这里先要清除一下定时器是为了防止一直点击按钮，div一直加速
//dir值是负责方向的，ta与目标值相比，若是为负数说明是往反方向的，而若为正数的话是往正方向的
dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
//开启定时器,假定让其等于500的时候，停止下来
obj.timer=setInterval(function(){
var speed=parseInt(getStyle(obj,attr)) + dir; //这里的left也是可以作为参数传递过来的
if( speed > target && dir>0 || speed < target && dir<0){
speed = target
}
obj.style[attr]= speed +"px";
if( speed == target){
clearInterval(obj.timer)
}
},50)
}
};
</script>
这是昨天的例子简化之后的代码，接下来看看怎么添加回调函数，那么昨天的布局就要稍微改动一下，用一个按钮来控制：
<style> #box{width:50px;height:50px;background:#ff6b0e;position: absolute;top:50px;left:50px;} </style> <body> <!--需求：点击“移动”，先向前移动然后向下移动--> <input id="btn1" type="button" value="移动"/> <div id="box"></div> </body>
那么js代码是：
<script>
//兼容不同浏览器获取行间样式
function getStyle ( obj, attr ) {
return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
window.onload=function(){
var aBtn1=document.getElementById("btn1");
var oBox=document.getElementById("box");
aBtn1.onclick=function(){
fn(oBox,"left",18,500,function(){
fn(oBox,"top",18,500)
})
};
function fn(obj,attr,dir,target,endFn){
clearInterval(obj.timer);//这里先要清除一下定时器是为了防止一直点击按钮，div一直加速
//dir值是负责方向的，ta与目标值相比，若是为负数说明是往反方向的，而若为正数的话是往正方向的
dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
//开启定时器,假定让其等于500的时候，停止下来
obj.timer=setInterval(function(){
var speed=parseInt(getStyle(obj,attr)) + dir; //这里的left也是可以作为参数传递过来的
if( speed > target && dir>0 || speed < target && dir<0){
speed = target
}
obj.style[attr]= speed +"px";
if( speed == target){
clearInterval(obj.timer);
//移动到第一个目标值的时候，让其换目标移动,因此要在这里调用一下函数
endFn && endFn();//这个写法就等于if(endFn){ endFn()},也就是当endFn不是未定义的时候就调用endFn
}
},50)
}
};
</script>
这个例子是完成了，但是有几点需要注意：实现多个效果的时候，若是可以重用的代码一定要重用，并且尽量不要留太多变量在外面，还有就是当第一个效果实现准备调用函数实现下一个目标的时候一定要写判断也就是上面例子里的
endFn && endFn();//这个写法就等于if(endFn){ endFn()},也就是当endFn不是未定义的时候就调用endFn
好了，就说这么多吧。