js实现盒子移动动画效果


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了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 id="box" 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>

效果图:

js实现盒子移动动画效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List Installed Software Features
Jun 11 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
js实现弹窗效果
Aug 09 #Javascript
js实现表格数据搜索
Aug 09 #Javascript
js实现微信聊天界面
Aug 09 #Javascript
js实现微信聊天效果
Aug 09 #Javascript
js实现盒子滚动动画效果
Aug 09 #Javascript
js仿京东放大镜效果
Aug 09 #Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 #Javascript
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
Python实现仿射密码的思路详解
2020/04/23 Python
快速创建python 虚拟环境
2020/11/28 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
关于VPN
2012/06/10 面试题
优秀社区干部事迹材料
2014/02/03 职场文书
共产党员承诺书
2014/03/25 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
店长岗位职责
2015/02/11 职场文书
慰问信模板
2015/02/14 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
入党函调证明材料
2015/06/19 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Redis如何实现分布式锁
2021/08/23 Redis
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python