在许多场景中,我们需要给元素添加缓动效果,比如轮播图等。
我们可以封装一个缓动动画函数,当我们需要给元素添加缓动效果时,直接调用夯实即可,可以提高开发效率。
函数封装如下:
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
/* if (callback) {
callback();
}; */
callback && callback(); //判断是否执行回调函数
};
var step = (target - obj.offsetLeft) / 10; //每次移动的距离
step = step > 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target - obj.offsetLeft) / 10);
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
};
参数解释如下:
obj:添加缓动效果的元素
target:目标位置
callback(可选):动画完成后执行的函数
值得一提的是,由于函数中使用了绝对定位