原生JS实现缓动的小球案例

最新推荐文章于 2021-10-15 17:03:48 发布

原创

最新推荐文章于 2021-10-15 17:03:48 发布 · 4.2k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍如何利用原生JavaScript实现缓动小球的案例。当鼠标移到小球上时，小球会跟随鼠标移动，多个小球依次延迟启动，形成缓动效果。通过for循环控制每个小球的启动时间间隔，实现动态跟随，所有小球的目标位置相同，产生平滑的动画视觉体验。

缓动的小球：就是当鼠标移动到小球内，小球随着鼠标的移动，小球跟着移动，而且小球会有很多，跟随者第一个小球接着运动。要实现这样的效果也就是要有以下的操作：

1.小球的缓存移动其实就是有很多小球（div）,他们每个小球的出发点和目的点都是一样的，只是控制间隔时间再运动。

2.再用for循环分别获取到每个小球，使每次读取到的i（数组下标）和间隔的一个关系：50*i.

要移动div形成美丽的变化，其实每个div的出发点和目的点是一样的，
*只需要改变他们之间发生的间隔。