脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现单方向匀速运动

js指定步长实现单方向匀速运动

 更新时间：2017年07月17日 16:31:08   作者：diasa  
这篇文章主要为大家详细介绍了js指定步长实现单方向匀速运动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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中的坐标和距离

    详解JavaScript中的坐标和距离

    在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况，于是便有了整理记录的想法，即加深了印象，又方便随时查阅。
    2019-05-05
  • JS实现的base64加密解密完整实例

    JS实现的base64加密解密完整实例

    这篇文章主要介绍了JS实现的base64加密解密,以完整实例形式分析了JavaScript基于base64编码实现加密与解密的具体步骤与相关技巧,并附带了相关的加密解密在线工具地址供大家参考,需要的朋友可以参考下
    2016-04-04
  • Html中JS脚本执行顺序简单举例说明

    Html中JS脚本执行顺序简单举例说明

    写在最前面的最先执行，Body的onload事件要在页面加载完后才执行。
    2010-06-06
  • IE中JS跳转丢失referrer问题的2个解决方法

    IE中JS跳转丢失referrer问题的2个解决方法

    这篇文章主要介绍了IE中JS跳转丢失referrer问题的2个解决方法,算是IE的一个BUG吧,本文提供了2个方法解决这个问题,需要的朋友可以参考下
    2014-07-07
  • webpack-merge的使用教程

    webpack-merge的使用教程

    这篇文章主要介绍了webpack-merge的使用,webpack-merge 工具提供了各种 merge(合并) 高级功能，本文给大家详细讲解，需要的朋友可以参考下
    2023-02-02
  • javascript实现控制div颜色

    javascript实现控制div颜色

    本文给大家分享的是使用javascript实现控制DIV背景色的代码，非常的简单实用，有需要的小伙伴可以参考下。
    2015-07-07
  • JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解

    JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解

    这篇文章主要介绍了JS/HTML5游戏常用算法之碰撞检测 地图格子算法,结合实例形式详细分析了javascript碰撞检测算法的相关原理、实现技巧与操作注意事项,需要的朋友可以参考下
    2018-12-12
  • js中获取jsp表单中radio类型的值简单实例

    js中获取jsp表单中radio类型的值简单实例

    下面小编就为大家带来一篇js中获取jsp表单中radio类型的值简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS运动基础框架实例分析

    JS运动基础框架实例分析

    这篇文章主要介绍了JS运动基础框架,实例分析了javascript定时器及div样式的使用技巧,需要的朋友可以参考下
    2015-03-03
  • JS实现网页每隔3秒弹出一次对话框的方法

    JS实现网页每隔3秒弹出一次对话框的方法

    这篇文章主要介绍了JS实现网页每隔3秒弹出一次对话框的方法,涉及JavaScript结合时间函数递归调用的相关技巧,非常简单,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11

最新评论