javascript实现缓动动画效果 javascript实现缓动动画效果

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

代码示例

aninamate动画 - 锐客网* {margin: 0; padding: 0; }.content {width: 1000px; margin: 0 auto; }button {padding: 5px; margin: 60px 10px; border: 1px solid #666; outline-color: palevioletred; }.both {background-color: pink; color: #fff; background-color: palevioletred; }.box {position: relative; height: 210px; margin: 0px auto; background-color: #191b28; }.yutu {position: absolute; top: 0; left: 0; width: 180px; height: 210px; }.qiaojingjing {position: absolute; top: 0; left: 820px; width: 180px; height: 210px; }.word1 {display: none; position: absolute; top: -50px; left: 45%; }.word2 {display: none; position: absolute; top: -30px; left: 50%; }
文章图片

文章图片
余生请多指教！余生请多指教！