前端开发:Javascript实现缓动动画效果

前端开发:Javascript实现缓动动画效果。

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

代码示例

HTML

作者:terry,如若转载,请注明出处:https://www.web176.com/news/frontend/7648.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2022年12月27日 下午7:08
下一篇 2022年12月29日 下午7:25

相关推荐

发表回复

登录后才能评论