首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

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

- Author -

diasa

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
package.json各个属性说明详解
Mar 11 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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
kubernetes(1) 查询效率(1) 分布式追踪(1) GPU(1) 条形码(1) HBuilder(1) delete in(1) Express(1) Three.js(1) group by(1)
You might like
初学者入门：细述PHP4的核心Zend
2006/09/05 PHP
php部分常见问题总结
2008/03/27 PHP
openPNE常用方法分享
2011/11/29 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
Python利用ansible分发处理任务
2015/08/04 Python
Python生成数字图片代码分享
2017/10/31 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python利用ORM控制MongoDB（MongoEngine）的步骤全纪录
2018/09/13 Python
实例详解Python模块decimal
2019/06/26 Python
Python数据可视化实现正态分布（高斯分布）
2019/08/21 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
Schutz鞋官方网站：Schutz Shoes
2017/12/13 全球购物
2014年党员公开承诺践诺书
2014/03/25 职场文书
初中生评语大全
2014/04/24 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书