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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
JS实现网站吸顶条
Jan 08 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 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
example1.php
2006/10/09 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
js中有关IE版本检测
2012/01/04 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
详解VueJS应用中管理用户权限
2018/02/02 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
Django unittest 设置跳过某些case的方法
2018/12/26 Python
Python数据可视化之画图
2019/01/15 Python
python实现多线程端口扫描
2019/08/31 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
python微信公众号开发简单流程实现
2020/03/09 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
会计人员岗位职责
2014/03/19 职场文书
历史学专业求职信
2014/06/19 职场文书
文明社区申报材料
2014/08/21 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang