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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
jsonp跨域请求详解
Jul 13 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
react 应用多入口配置及实践总结
Oct 17 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
Chrome Web App开发小结
2014/09/04 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
文本框回车提交与禁止提交示例
2013/09/27 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
浅析Python中的多进程与多线程的使用
2015/04/07 Python
python实现解数独程序代码
2017/04/12 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
python高级特性简介
2020/08/13 Python
大三预备党员入党思想汇报
2014/01/08 职场文书
英语道歉信范文
2014/01/09 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
走群众路线剖析材料
2014/10/09 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
先进基层党组织材料
2014/12/25 职场文书
七一建党节慰问信
2015/02/14 职场文书
教师节大会主持词
2015/07/06 职场文书
微信早安问候语
2015/11/10 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
vue里使用create, mounted调用方法
2022/04/26 Vue.js
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS