function animate(obj, target) {clearInterval(obj.timer);//obj.timer = setInterval(function() {var timer = setInterval(function() {if (obj.offsetLeft >= target) {clearInterval(timer);}obj.style.left = obj.offsetLeft + 1 + 'px';}, 30);// 時間間隔，偏移距離可自行設置}//animate(obj,target);

緩動效果

function animate(obj, target) {clearInterval(obj.timer);obj.timer = setInterval(function() {var step = (target - obj.offsetLeft) / 10;// 把我們步長值改為整數 不要出現小數的問題,//前進往大取整Math.ceil，后退往小取整Math.floorstep = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft >= target) {// 停止動畫 本質是停止定時器clearInterval(timer);}obj.style.left = obj.offsetLeft + step + 'px';}, 30);}

總結

以上是生活随笔為你收集整理的简单动画函数封装及缓动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。