上下运动函数 

 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                 doMoveVertical(oDiv,'top',10,500);
29             };
30             oInput[1].onclick = function(){
31                 doMoveVertical(oDiv,'top',10,50);
32             };
33             
34             /*
35              * obj:要移动的对象
36              * attr:方向属性，top（上下）
37              * dir:移动步长
38              * target：目的地的位置
39              */
40             function doMoveVertical(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                     if(speed > target && dir > 0 || speed < target && dir < 0){
46                         speed = target;
47                     }
48                     
49                     obj.style[attr] = speed + 'px';
50                     if(speed == target){
51                         clearInterval(obj.timer);
52                     }
53                 },100);
54             }
55             
56         };
57         
58     </script>
59 </head>
60 <body>
61     <input type="button" name="" value="往下">
62     <input type="button" name="" value="往上">
63     <div id="box">
64         
65     </div>
66 </body>
67 </html>

 

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