动画封装 

 1 <body>
 2     <button id="btn">开始动画</button>
 3     <div id="box"></div>
 4 <script>
 5     window.addEventListener('load', function (ev) {
 6          linearAnimation('btn', 'box', 50, 800);
 7     });
 8 
 9     function linearAnimation(btnId, boxId, step, target) {
10         // 1. 获取需要的标签
11         var btn = document.getElementById(btnId);
12         var box = document.getElementById(boxId);
13 
14         var intervalID = null, begin = 0;
15 
16         // 2. 事件触发
17         btn.addEventListener('click', function (ev1) {
18             // 2.1 清除定时器
19             clearInterval(intervalID);
20 
21             // 2.2 设置定时器
22             intervalID = setInterval(function () {
23                 //  改变起始值
24                 begin += step;
25 
26                 // 判断
27                 if(begin >= target){
28                     begin = target;
29                     //  清除定时器
30                     clearInterval(intervalID);
31                 }
32                 console.log(begin);
33 
34                 // 动起来
35                 box.style.marginLeft = begin + 'px';
36             }, 10);
37         });
38     }
39 </script>

 

posted @ 2019-07-16 22:47  疏影横斜水清浅  阅读(105)  评论(0)    收藏  举报