javascript实现缓动动画效果

本文实例为大家分享了javascript实现缓动动画效果的具体代码，供大家参考，具体内容如下

实现思路

1、主要使用setInterval定时函数
2、给需要动画的元素添加绝对定位和偏移量，注意它的父元素要给相对定位
3、多个元素执行动画，可以将动画代码封装成一个函数
4、元素调用定时函数，定时移动，定时函数里- - -计算出每次移动距离
公式：var step = (target - obj.offsetLeft) / 20;
obj 动画对象, target 目标左偏移量，20 控制的是动画速度，数值越大越慢，越小越快
5、定时函数里还可以接收回调函数，有的话，动画结束时执行回调函数
6、注意定时函数里最前面写上清除动画的代码- - -clearInterval(obj.timer);不写的话，每次触发元素动画会效果叠加；写上清除之前的动画影响

代码示例

    
    
    
    
    



    

        于途前进
        乔晶晶前进
        双向奔赴
        于途后退
        乔晶晶后退
        

            
            
            余生请多指教！
            余生请多指教！
        
    

    

动画效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。