<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> #div1{height:100px;width:100px;position:absolute;top:50;left:10px;background:red;} </style> <body> <input type="button" value="向前" id = ‘btn1‘> <input type="button" value="向后" id = ‘btn2‘> <div id="div1"></div> <script> function getEle(_id){ return document.getElementById(_id); } var oBtn1 = getEle(‘btn1‘); var oBtn2 = getEle(‘btn2‘); var oDiv = getEle(‘div1‘); oBtn1.onclick = function(){ doMove(oDiv, 12, 800); } oBtn2.onclick = function(){ doMove(oDiv, -12, 10); } function doMove(obj, dir, target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = parseInt(getStyle(obj,‘left‘)) + dir; if(speed > target && dir > 0){ speed = target; } if(speed < target && dir < 0){ speed = target; } obj.style.left = speed + ‘px‘; if(speed == target){ clearInterval(obj.timer); } },30) } function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; } </script> </body> </html>
原文：http://www.cnblogs.com/clearfix/p/4154213.html