本文实例为大家分享了js实现盒子移动动画效果的具体代码，供大家参考，具体内容如下
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Document
.box {
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 0;
top: 50px;
}
let boxStart = document.getElementById("box_start");
let boxStop = document.getElementById("box_stop");
let boxBack = document.getElementById("box_back");
let timeId_1;
let timeId_2;
boxStart.onclick = function () {
let box = document.getElementById("box");
clearInterval(timeId_2);
timeId_1 = setInterval(function () {
if (box.offsetLeft >= 600) {
clearInterval(timeId_1);
box.style.left = 600 + 'px';
alert('到达目的地');
} else {
box.style.left = box.offsetLeft + 10 + 'px';
}
}, 100);
};
boxBack.onclick = function () {
let box = document.getElementById("box");
clearInterval(timeId_1);
timeId_2 = setInterval(function () {
if (box.offsetLeft <= 0) {
clearInterval(timeId_2);
box.style.left = "0";
alert('已在出发位置');
} else {
box.style.left = box.offsetLeft - 10 + 'px';
}
}, 100);
};
boxStop.onclick = function () {
clearInterval(timeId_1);
clearInterval(timeId_2);
};
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
时间： -08-08
