js指定步长实现单方向匀速运动


Posted in Javascript onJuly 17, 2017

本文实例为大家分享了js实现单方向匀速运动的具体代码,供大家参考,具体内容如下

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id='box'></div>
  <script>
    var oBox = document.getElementById("box");
    var maxLeft = utils.win('clientWidth')-oBox.offsetWidth;
    var step = 5;

    var timer = window.setInterval(function(){
      var curLeft = utils.css(oBox,"left");
      if(curLeft+step >= maxLeft){//边界判断
        utils.css(oBox,"left",maxLeft);
        window.clearInterval(timer);
        return;
      }
      curLeft+=step;
      utils.css(oBox,"left",curLeft);
    },10)

    //问题:当总距离/我们设定的步长 = 不是一个整数。少走一步还差点距离到目标位置,多走一步会超出目标的位置
    //解决:在进行边界判断的时候加上步长来进行处理

  </script>
</body>
</html>

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

Javascript 相关文章推荐
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 #Javascript
javascript 跨域问题以及解决办法
Jul 17 #Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 #Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 #Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 #Javascript
js学使用setTimeout实现轮循动画
Jul 17 #Javascript
详解Vue2.x-directive的学习笔记
Jul 17 #Javascript
You might like
php简单提示框alert封装函数
2010/08/08 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
关于js类的定义
2011/06/28 Javascript
jquery 使用简明教程
2014/03/05 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
实例Python处理XML文件的方法
2015/08/31 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Python实现的knn算法示例
2018/06/14 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
高级护理专业大学生求职信
2013/10/24 职场文书
师范生个人推荐信
2013/11/29 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
行政二审代理词
2015/05/25 职场文书
《灰雀》教学反思
2016/02/19 职场文书