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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
限制只能输入数字的实现代码
May 16 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
详解uniapp的全局变量实现方式
Jan 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利用cookies实现购物车的方法
2014/12/10 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
python解决字典中的值是列表问题的方法
2013/03/04 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python实现电子产品商店
2019/02/26 Python
python命令行参数用法实例分析
2019/06/25 Python
Django model select的多种用法详解
2019/07/16 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
个人求职信范文分享
2014/01/06 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
英语教师岗位职责
2014/03/16 职场文书
中秋节主持词
2014/04/02 职场文书
学校2014年度工作总结
2014/12/06 职场文书
Python  lambda匿名函数和三元运算符
2022/04/19 Python
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers