简单动画函数封装及缓动效果

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);}

总结

以上是生活随笔为你收集整理的简单动画函数封装及缓动效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。