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下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
BootStrap 导航条实例代码
May 18 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
人大复印资料处理程序_查询篇
2006/10/09 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
详解jQuery选择器
2016/12/21 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
介绍Python中内置的itertools模块
2015/04/29 Python
Python的time模块中的常用方法整理
2015/06/18 Python
python的turtle库使用详解
2019/05/10 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
上班离岗检讨书
2014/01/27 职场文书
人力资源求职信
2014/05/25 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
公司出差管理制度范本
2015/08/05 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python