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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
js友好的时间返回函数
Aug 24 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
使用JavaScript解析URL的方法示例
Mar 01 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脚本的10个技巧(5)
2006/10/09 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
php写app用的框架整理
2019/09/29 PHP
javascript处理table表格的代码
2010/12/06 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
从零学Python之hello world
2014/05/21 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python dlib人脸识别代码实例
2019/04/04 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
给老师的检讨书
2014/02/11 职场文书
人事部岗位职责范本
2014/03/05 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
单位在职证明书
2014/09/11 职场文书
地方课程教学计划
2015/01/19 职场文书
英语感谢信范文
2015/01/20 职场文书
校车司机安全责任书
2015/05/11 职场文书
css3新特性的应用示例分析
2022/03/16 HTML / CSS
Python OpenCV超详细讲解基本功能
2022/04/02 Python