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 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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入门速成教程
2007/03/19 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
php中memcache 基本操作实例
2015/05/17 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
详解angular应用容器化部署
2018/08/14 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
python发送伪造的arp请求
2014/01/09 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python随机读取文件实现实例
2017/05/25 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
详解Python中的type和object
2018/08/15 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
银行见习期自我鉴定
2014/01/29 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
主婚人致辞精选
2015/07/28 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
MySQL创建管理子分区
2022/04/13 MySQL