<!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>