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 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 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
zend framework多模块多布局配置
2011/02/26 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
Python实现把xml或xsl转换为html格式
2015/04/08 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
财务会计应届生求职信
2013/11/24 职场文书
会计求职信
2014/05/29 职场文书
啦啦队口号大全
2014/06/16 职场文书
2014年路政工作总结
2014/12/10 职场文书
2015年化验员工作总结
2015/04/10 职场文书
停水通知
2015/04/16 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
运动员入场词
2015/07/18 职场文书
《确定位置》教学反思
2016/02/18 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
MySQL开启事务的方式
2021/06/26 MySQL