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 自动转到命名锚记
Jan 10 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 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/12/02 PHP
解析link_mysql的php版
2013/06/30 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
python PIL模块与随机生成中文验证码
2016/02/27 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
详解Python self 参数
2019/08/30 Python
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
大三自我鉴定范文
2013/10/05 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
学生通报表扬范文
2015/05/04 职场文书
画展观后感
2015/06/17 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android