1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 #div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
8 </style>
9 </head>
10
11 <body>
12
13 <input id="btn1" type="button" value="往后" />
14 <input id="btn2" type="button" value="往前" />
15 <div id="div1"></div>
16
17 <script>
18 var oBtn1 = document.getElementById(‘btn1‘);
19 var oBtn2 = document.getElementById(‘btn2‘);
20 var oDiv = document.getElementById(‘div1‘);
21
22 oBtn1.onclick = function () {
23 clearInterval( oDiv.timer );
24 oDiv.timer = setInterval(function () {
25 var speed = parseInt(getStyle( oDiv, ‘left‘ )) + -12; // 步长
26 if ( speed < 10 ) {
27 speed = 10;
28 }
29 oDiv.style.left = speed + ‘px‘;
30 if ( speed == 10 ) {
31 clearInterval( oDiv.timer );
32 }
33 }, 30);
34 };
35
36 oBtn2.onclick = function () {
37 clearInterval( oDiv.timer );
38 oDiv.timer = setInterval(function () {
39 var speed = parseInt(getStyle( oDiv, ‘left‘ )) + 12; // 步长
40 if ( speed > 800 ) {
41 speed = 800;
42 }
43 oDiv.style.left = speed + ‘px‘;
44 if ( speed == 800 ) {
45 clearInterval( oDiv.timer );
46 }
47 }, 30);
48 };
49
50 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
51 </script>
52
53 </body>
54 </html>
把上面的写成一个方法
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 #div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
8 </style>
9 </head>
10
11 <body>
12
13 <input id="btn1" type="button" value="往后" />
14 <input id="btn2" type="button" value="往前" />
15 <div id="div1"></div>
16
17 <script>
18 var oBtn1 = document.getElementById(‘btn1‘);
19 var oBtn2 = document.getElementById(‘btn2‘);
20 var oDiv = document.getElementById(‘div1‘);
21
22 oBtn1.onclick = function () {
23 doMove ( oDiv, -12, 10 );
24
25 };
26
27 oBtn2.onclick = function () {
28 doMove ( oDiv, 12, 800 );
29 };
30
31 function doMove ( obj, dir, target ) {
32 clearInterval( obj.timer );
33
34 obj.timer = setInterval(function () {
35 var speed = parseInt(getStyle( obj, ‘left‘ )) + dir; // 步长
36 if ( speed > target && dir > 0 ) { // 往前跑
37 speed = target;
38 }
39 if ( speed < target && dir < 0 ) { // 往后跑
40 speed = target;
41 }
42 obj.style.left = speed + ‘px‘;
43 if ( speed == target ) {
44 clearInterval( obj.timer );
45 }
46
47 }, 30);
48 }
49
50 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
51 </script>
52
53 </body>
54 </html>
对方向进行修改
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 #div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
8 </style>
9 </head>
10
11 <body>
12
13 <input id="btn1" type="button" value="往上" />
14 <input id="btn2" type="button" value="往下" />
15 <div id="div1"></div>
16
17 <script>
18 var oBtn1 = document.getElementById(‘btn1‘);
19 var oBtn2 = document.getElementById(‘btn2‘);
20 var oDiv = document.getElementById(‘div1‘);
21
22 oBtn1.onclick = function () {
23
24 doMove ( oDiv, ‘top‘, 12, 40 );
25
26 };
27
28 oBtn2.onclick = function () {
29
30 doMove ( oDiv, ‘top‘, 12, 500 );
31
32 };
33
34 function doMove ( obj, attr, dir, target ) {
35
36 dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
37
38 clearInterval( obj.timer );
39
40 obj.timer = setInterval(function () {
41
42 var speed = parseInt(getStyle( obj, attr )) + dir; // 步长
43
44 if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
45 speed = target;
46 }
47
48 obj.style[attr] = speed + ‘px‘;
49
50 if ( speed == target ) {
51 clearInterval( obj.timer );
52 }
53
54 }, 30);
55 }
56
57 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
58 </script>
59
60 </body>
61 </html>
原文：http://www.cnblogs.com/nifengs/p/4958557.html