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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
express 项目分层实践详解
Dec 10 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 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之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP return语句的另一个作用
2014/07/30 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
php实现的日历程序
2015/06/18 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
AJAX架构之Dojo篇
2007/04/10 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
javascript的BOM
2016/05/03 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
从0开始的Python学习016异常
2019/04/08 Python
Python中的self用法详解
2019/08/06 Python
Django实现文件上传和下载功能
2019/10/06 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
精通CAD能手自荐书
2014/01/31 职场文书
军训考核自我鉴定
2014/02/13 职场文书
《猴子种树》教学反思
2014/02/14 职场文书