js 原生匀速运动 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7   <title>点击匀速移动</title>
  8   <style>
  9     * {
 10       margin: 0;
 11       padding: 0;
 12       font-family: '微软雅黑';
 13     }
 14 
 15     .box {
 16       width: 50px;
 17       height: 50px;
 18       color: #ffffff;
 19       text-align: center;
 20       font-size: 14px;
 21       line-height: 50px;
 22       margin-top: 20px;
 23       position: relative;
 24     }
 25 
 26     .box:nth-child(1) {
 27       background-color: #0088ff;
 28       left: 50px;
 29     }
 30 
 31     .box:nth-child(2) {
 32       background-color: #ff8800;
 33       left: 400px;
 34     }
 35 
 36     #ruler {
 37       margin-top: 40px;
 38     }
 39 
 40     #a div {
 41       width: 48.6px;
 42       height: 7.6px;
 43       border: 1.4px solid #333;
 44       border-width: 0 1.4px 1.4px 0;
 45       float: left;
 46     }
 47 
 48     #a div:last-child {
 49       border-width: 0 0 1.4px 0;
 50     }
 51 
 52     #b div {
 53       font-size: 12px;
 54       font-weight: lighter;
 55       position: relative;
 56       top: 10px;
 57       float: left;
 58     }
 59 
 60     #b div:nth-child(1) {
 61       left: 90px;
 62     }
 63 
 64     #b div:nth-child(2) {
 65       left: 150px;
 66     }
 67 
 68     #b div:nth-child(3) {
 69       left: 220px;
 70     }
 71 
 72     #b div:nth-child(4) {
 73       left: 290px;
 74     }
 75 
 76     #b div:nth-child(5) {
 77       left: 360px;
 78     }
 79 
 80     #form {
 81       background-color: #eeeeee;
 82       font-size: 14px;
 83       margin: 20px 0;
 84       width: 540px;
 85       padding: 30px;
 86     }
 87 
 88     #form input:nth-child(1) {
 89       width: 50px;
 90       padding: 3px;
 91       font-size: 12px;
 92       font-weight: lighter;
 93       border: 4px solid #666666;
 94     }
 95 
 96     #form input:nth-child(2) {
 97       border: 1px solid #444444;
 98       padding: 3px 8px;
 99       font-size: 12px;
100       background-color: #666666;
101       color: #ffffff;
102     }
103   </style>
104 </head>
105 
106 <body>
107   <div class="box">box1</div>
108   <div class="box">box2</div>
109   <div id="ruler">
110     <div id="a">
111       <div></div>
112       <div></div>
113       <div></div>
114       <div></div>
115       <div></div>
116       <div></div>
117       <div></div>
118       <div></div>
119       <div></div>
120       <div></div>
121       <div></div>
122       <div></div>
123     </div><br />
124     <div id="b">
125       <div>100px</div>
126       <div>200px</div>
127       <div>300px</div>
128       <div>400px</div>
129       <div>500px</div>
130     </div>
131     <div id="form">
132       <input type="text" value="100">
133       <input type="submit" value="移动">
134     </div>
135   </div>
136   <script>
137     var btn = document.getElementsByTagName("input")[1];
138     var target = document.getElementsByTagName("input")[0];
139     var box = document.getElementsByClassName('box')[0];
140     var box2 = document.getElementsByClassName('box')[1];
141     btn.onclick = function () {
142       uniformSpeed(box, target.value)
143       uniformSpeed(box2, target.value)
144     };
145 
146     // 运动方法
147     function uniformSpeed(ele, target) {
148       var speed = 6;
149       if (Math.abs(ele.offsetLeft - target) > speed) {
150         clearInterval(ele.timer) //保证元素此动画计时器不重复
151         var dir = ele.offsetLeft < target ? 1 : -1; //确定运动方向
152         ele.timer = setInterval(function () {
153           //一般移动
154           // ele.style.left = ele.offsetLeft + dir * speed + 'px';
155           // if (Math.abs(ele.offsetLeft - target) <= speed) { //快到达时微调到具体位置
156           //   ele.style.left = target + 'px';
157           //   clearInterval(ele.timer)
158           // }
159 
160           // 精细移动
161           ele.style.left = ele.offsetLeft + dir * Math.ceil(Math.abs(ele.offsetLeft - target) / 10) +
162             'px'; //offset 精度为整数，移动幅度小于1会丢失小数
163           if (ele.offsetLeft === target) {
164             clearInterval(ele.timer)
165           }
166         }, 24);
167       }
168     }
169   </script>
170 </body>
171 
172 </html>

 

posted @ 2020-05-16 12:39  金刚奥特曼  阅读(95)  评论(0)    收藏  举报