<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{ margin:0;padding: 0;}
div{position: absolute; width: 100px; height: 100px; background: red; left: 0;top: 100px;}
</style>
</head>
<body>
<button id="btn1">下</button>
<button id="btn2">上</button>
<div id="box"></div>
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var box = document.getElementById('box');
btn1.onclick = function(){
move(box,'top',12,600,function(){
move(box,'left',12,400)
});
}
btn2.onclick = function(){
move(box,'top',12,40,function(){
move(box,'left',12,0)
});
}
/*
obj:要运动的元素
attr:属性
dir:步长
target:目标点
endFn:回调函数
*/
function move(obj,attr,dir,target,endFn){
//根据元素当前位置和目标点的比较，动态设置步长为正数或负数
dir = parseInt( getStyle(obj,attr) ) < target ? dir : -dir;
// 1、清除定时器
clearInterval(obj.timer);
// 2、设置定时器
obj.timer = setInterval(function(){
// 3、获取元素当前位置+步长
var speed = parseInt( getStyle(obj,attr) ) + dir;
// 4、如果元素当前位置超过目标点，则把当前位置==目标点
if( speed > target && dir > 0 || speed < target && dir < 0){
speed = target
}
// 5、设置元素位置
obj.style[attr] = speed + 'px';
// 6、判断是否到达目标点，如果到达则停止定时器
if(speed == target){
clearInterval(obj.timer);
// 回调函数，如果endFn存在则执行
endFn && endFn();
}
},20)
}
/*
获取非行间样式：
标准浏览器下 getComputedStyle(obj)[attr]
IE浏览器下 obj.currentStyle[attr]
*/
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
}
</script>
</body>
</html>