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 相关文章推荐
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
JavaScript严格模式详解
Nov 18 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 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
PHP中常用的输出函数总结
2014/09/22 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
prototype class详解
2006/09/07 Javascript
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
python 制作简单的音乐播放器
2020/11/25 Python
python温度转换华氏温度实现代码
2020/12/06 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
外贸业务员工作职责
2014/01/06 职场文书
酒店led欢迎词
2014/01/09 职场文书
领导欢迎词范文
2015/01/26 职场文书
2015年资料员工作总结
2015/04/25 职场文书
培训计划通知
2015/07/15 职场文书
高一语文教学反思
2016/02/16 职场文书