javascript实现缓动动画效果

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

实现思路

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

代码示例





    
    
    
    aninamate动画
    



    
余生请多指教! 余生请多指教!

动画效果:

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

你可能感兴趣的