API之封裝動畫函數

時間 2019-11-18

原文原文鏈接

步驟

獲取所須要的頁面元素
給按鈕註冊點擊事件，寫出事件函數，事件函數裏面調用封裝的動畫函數
封裝動畫函數
- 明確動畫函數有兩個參數，一個參數是運動的對象，另外一個函數是目標距離
- 首先先清理一次定時器（不然會不受控制）
- 獲取傳入對象的當前位置
- 定義一個變量記錄每次對象移動多少距離
- 若是傳入對象的當前距離小於目標距離則走正數，不然走負數
- 肯定每次移動後的距離
- 判斷傳入對象是否到達目標位置，若是目標距離-當前距離的絕對值 > 每次要移動的距離的絕對值，那麼傳入對象正常移動，不然清理定時器，直接到達目標位置

對象要移動就要脫離文檔流
** 若是樣式的代碼在style標籤內設置，那麼外面就沒法獲取到他的值，因此須要用offset來獲取**
若是樣式的代碼在標籤的屬性裏設置，那麼它就能夠被獲取

詳細代碼函數

<body>
        <input type="button" value="移動到400px" id="btn1">
        <input type="button" value="移動到800px" id="btn2">
        <div id="box"></div>
        <script>
          
            var btn1 = document.getElementById('btn1');
            var btn2 = document.getElementById('btn2');
            var box = document.getElementById('box');
            
            btn1.onclick = function () {
                 animation(box, 400);
            }
    
            btn2.onclick = function () {
                 animation(box, 800);
            }
            function animation (element, target) {
                //先清理定時器
                clearInterval(element.timeId);
                element.timeId = setInterval (function() {
                    //獲取div當前位置，
                    var current = element.offsetLeft;//數據類型，沒有px
                    // div 每次移動多少像素
                    var step = 10;
                    //當前位置小於目標位置，走正數，不然走負數
                    step = current < target ? step : -step;
                    //每次移動後的距離
                    current += step;
                    //判斷當前位置是否到達目標位置
                    if(Math.abs(target - current) > Math.abs(step)) {
                        element.style.left = current + 'px';
                    }else {
                        clearInterval(timeId);
                        //最後一次剩餘要走的步數小於每次要走的步數，那麼直接到達終點
                        element.style.left = target + 'px';
                    }
                },20);
            }
        </script>
    </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。