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 UrlDecode函数代码
Jan 09 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JavaScript 的继承
Oct 01 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
js 窗口抖动示例
Sep 04 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python实现的归并排序算法示例
2017/11/21 Python
Django的分页器实例(paginator)
2017/12/01 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
python画图的函数用法以及技巧
2019/06/28 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
vue+django实现下载文件的示例
2021/03/24 Vue.js
护士岗前培训自我评鉴
2014/02/28 职场文书
关于安全演讲稿
2014/05/09 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
高三语文复习计划
2015/01/19 职场文书
党性修养心得体会2016
2016/01/21 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技