首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:14:18
字体:
来源:转载
供稿:网友

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持错新站长站。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选