/** * * 動畫函數多個目標值之間移動 * 1、如果是正值，則向大取整 2、如果是負值，則向小取整 * * * * @param {元素} obj * @param {距離} target * @param {回調函數} callback */ function ainmate (obj,tar ...
/** * * 動畫函數多個目標值之間移動 * 1、如果是正值，則向大取整 2、如果是負值，則向小取整 * * * * @param {元素} obj * @param {距離} target * @param {回調函數} callback */
function ainmate (obj,target,callback){ // 清除定時器，是指清除誰的定時器，這裡是輪播圖，所以清除元素的定時器 clearInterval(obj.timer); // 創建定時器，清除定時器，頁面中就沒有定時器，每輪播一次創建一個定時器， // 使其頁面中只保留一個定時器,同理元素的定時器 obj.timer = setInterval(function(){ //定義步長值變數，用來接收走的步數 // 步長值 = （距離 - 元素距離左邊的距離） 除 10; //10代表分成幾份，可以更多，可以更少，看個人審美 var step = (target - obj.offsetLeft) / 10; // 三元表達式, 當step的距離是向右移動是整數，會有一點誤差，所以天花板函數取大，取整 相反往左移動會出現小數，則地板函數取小，取整 step = step > 0 ? Math.ceil(step) : Math.floor(step) ; // 輪播一周後，清除定時器 if (obj.offsetLeft == target) { clearInterval(obj.timer); // 回調函數，判斷是否有回調函數,如果有調用,如果沒有不調用 if (callback){ callback(); } // 簡寫方法 // callback && callback(); } //輪播的元素需要有css里定位 // 輪播的運算 obj.style.left = obj.offsetLeft + step +'px'; },30) }
