小球移动
简述:小球向一个方向定向移动
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/animate.js"></script>
<title>Document</title>
</head>
<body>
<div class="box1" id="box1"></div>
<div class="box2" id="box2"></div>
</body>
</html>
css部分
*{margin: 0; padding: 0;}
.box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
border-radius: 50%;
top: 0px;
left: 500px;
}
.box2{
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
border-radius: 50%;
top: 150px;
left: 0px;
}
js部分
<script>
let box1 = document.getElementById("box1"),
box2 = document.getElementById("box2");
console.log(box1);
animateMoudle.init(box1,0);
animateMoudle.init(box2,500);
</script>
animate.js
let animateMoudle = (function () {
/*
* 功能:让一个盒子水平运动起来
* 参数1:盒子 参数2:目标位置
* */
function animate(obj, target) {
clearInterval(obj.timer); // clearInterval(und) 也不会报错
obj.timer = setInterval(function () {
let step = 9; // 步长
let current = obj.offsetLeft; // 得到盒子相对于参考点的偏移量
step = target >= current ? step : -step; // 此时step要么是正10 要么是-10
if (Math.abs(target - current) >= Math.abs(step)) {
// 距离目标的距离 至少还大于一个步长
current += step;
obj.style.left = current + "px";
} else {
// 距离目标的距离 已经小于了一个步长
obj.style.left = target + "px";
clearInterval(obj.timer);
}
}, 17)
}
return {
init:animate
}
})();
运行效果
小球运动前
小球运动后