js实现盒子移动动画效果
导读：本文实例为大家分享了js实现盒子移动动画效果的具体代码，供大家参考，具体内容如下<!doctype html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' ...
本文实例为大家分享了js实现盒子移动动画效果的具体代码，供大家参考，具体内容如下
<!doctype html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Document</title> <style> .box { width: 200px; height: 200px; border: 1px solid red; position: absolute; left: 0; top: 50px; } </style></head><body><input type='button' value='前进' id='box_start'><input type='button' value='停止' id='box_stop'><input type='button' value='回退' id='box_back'><br><br><div class='box'></div><script> 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); };</script></body></html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. CSS3实例分享之多重背景的实现(Multiple backgrounds)2. intellij idea中spring boot properties文件不能自动提示问题解决3. Android自定义Dialog框样式4. 使用Canal实现PHP应用程序与MySQL数据库的实时数据同步5. 一篇文章带你了解JavaScript-语句6. 详解IDEA搭建springBoot方式一(推荐)7. asp.net core服务限制堆内存大小的操作方法8. intellij idea写Python教程9. Android Studio导入jar包过程详解10. IntelliJ IDEAx导出安卓（Android）apk文件图文教程
网公网安备