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获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
JavaScript模拟push
Mar 06 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 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
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
js date 格式化
2017/02/15 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
react-router实现按需加载
2017/05/09 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python利用sklearn包编写决策树源代码
2017/12/21 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
幼儿园教师教育感言
2014/02/28 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
小学生差生评语
2014/12/29 职场文书
三八节活动主持词
2015/07/04 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
2016党员党课心得体会
2016/01/07 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server