原生JS实现缓动的小球案例
缓动的小球：就是当鼠标移动到小球内，小球随着鼠标的移动，小球跟着移动，而且小球会有很多，跟随者第一个小球接着运动。要实现这样的效果也就是要有以下的操作：
1.小球的缓存移动其实就是有很多小球（div）,他们每个小球的出发点和目的点都是一样的，只是控制间隔时间再运动。
2.再用for循环分别获取到每个小球，使每次读取到的i（数组下标）和间隔的一个关系：50*i.
要移动div形成美丽的变化，其实每个div的出发点和目的点是一样的， *只需要改变他们之间发生的间隔。 * 用for遍历每次每次鼠标移动后的每一个div都去间隔定时发生style的left和top的改变 * 另外注意一下let操作（50*i.）这个关系很重要，详解：
也就是我第一个小球（第一个遍历的小球，i为0的下标）花了 0*50=0 毫秒的时间开始随着鼠标进行运动
然后我第二个小球（第二个遍历的小球，i为1的下标）花了 1*50=50 毫秒的时间开始随着鼠标进行运动，比第一个小球晚了50毫妙进行运动
···················
但是他们的出发点和目的点都是一样的，所以，会产生缓动的效果。
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓动的小球</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-color: hotpink;
position: absolute;
border-radius: 50%;
width: 40px;
height: 40px;
top:0;
left:0;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
/*我对整个文档进行MouseMove事件，left和top变量是指鼠标移动的那个点参照于浏览器的那个距离
* 在这里我把鼠标设置为始终在小球的中心，不管开始第一下鼠标点击点在小球的哪里，在移动中始终在小球中心
* */
var divs=document.getElementsByTagName("div");
document.onmousemove=function (event) {
var left=event.clientX;
var top=event.clientY;
/*这里是核心，要移动div形成美丽的变化，其实每个div的出发点和目的点是一样的，
*只需要改变他们之间发生的间隔。
* 用for遍历每次每次鼠标移动后的每一个div都去间隔定时发生style的left和top的改变
* 另外注意一下let操作
* */
for(let i=0;i<divs.length;i++){
divs[i].style.backgroundColor="rgb("+randomNum(1,255)+","+randomNum(1,255)+","+randomNum(1,255)+")";
setTimeout(function () {
divs[i].style.left=left-divs[i].offsetWidth/2+"px";
divs[i].style.top=top-divs[i].offsetWidth/2+"px";
},50*i);
}
}
//生成随机数的函数
function randomNum(n,m) {
return parseInt(Math.random()*(m-n+1)+n);
}
</script>
</body>
</html>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 动态配置模块实现模块拖拽效果
- 下一篇： 超酷动态图片展示墙JS特效制作方法
