封装好的doMoveHorizontal()函数 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css" media="screen">
 7         #box{
 8             width: 100px;
 9             height: 100px;
10             position: absolute;
11             top: 50px;
12             left: 50px;
13             background-color: #666;
14         }
15     </style>
16     <script>
17         window.onload = function(){
18             var oInput = document.getElementsByTagName('input');
19             var oDiv = document.getElementById('box');
20 
21 
22             function getStyle(obj,attr){
23                 return obj.currentStyle? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
24             }
25 
26 
27             oInput[0].onclick = function(){
28                 doMoveHorizontal(oDiv,'left',20,800);
29             };
30             oInput[1].onclick = function(){
31                 doMoveHorizontal(oDiv,'left',20,50);
32             };
33             
34             /*
35              * obj:要移动的对象
36              * attr:方向属性，left（左右）
37              * dir:移动步长
38              * target：目的地的位置
39              */
40             function doMoveHorizontal(obj,attr,dir,target){
41                 dir = parseInt(getStyle(obj,attr)) < target? dir : -dir;
42                 clearInterval(obj.timer);
43                 obj.timer = setInterval(function(){
44                     var speed = parseInt(getStyle(obj,attr)) + dir;
45                     
46 //                    if(speed > target && dir > 0){    //往前
47 //                        speed = target;
48 //                    }
49 //                    if(speed < target && dir < 0){    //往后
50 //                        speed = target;
51 //                    }
52 
53                     if(speed > target && dir > 0 || speed < target && dir < 0){
54                         speed = target;
55                     }
56                     
57                     obj.style[attr] = speed + 'px';
58                     if(speed == target){
59                         clearInterval(obj.timer);
60                     }
61                 },100);
62             }
63             
64         };
65         
66     </script>
67 </head>
68 <body>
69     <input type="button" name="" value="往前">
70     <input type="button" name="" value="往后">
71     <div id="box">
72         
73     </div>
74 </body>
75 </html>

 

posted @ 2017-04-11 11:46  寒雨落轩  阅读(215)  评论(0)    收藏  举报