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 相关文章推荐
jQuery代码优化 选择符篇
Nov 01 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
vue mvvm数据响应实现
Nov 11 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中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
药剂专业个人求职信范文
2014/04/29 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL