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 window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
Python装饰器使用示例及实际应用例子
2015/03/06 Python
详细介绍Python的鸭子类型
2016/09/12 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
安全员岗位职责
2013/11/11 职场文书
大学生党课思想汇报
2013/12/29 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
优秀员工推荐材料
2014/12/20 职场文书
公司员工培训管理制度
2015/08/04 职场文书
思想工作总结范文
2015/08/12 职场文书