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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现匀速运动的代码实例

    JS实现匀速运动的代码实例

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 100px;            height: 10

  • 浅谈Javascript如何实现匀速运动

    浅谈Javascript如何实现匀速运动

    网站上会经常用到Javascript 中的运动,这次与大家分享一下一些运动的基本应用 . 方便大家在开发中能够直接使用. 代码简单易懂,适用于初学者.最后会一步一步整理出一套自己的运动框架. 应用案例效果图: 鼠标移动到分享上 ,左边的div就会显示出来.移开会自己恢复.相信这个大家都会用到 很实用,下面看看代码是如何实现的. 复制代码 代码如下: <style type="text/css">             #div1 {                 wid

  • JS匀速运动演示示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • javascript匀速运动实现方法分析

    javascript匀速运动实现方法分析

    本文实例讲述了javascript匀速运动实现方法.分享给大家供大家参考,具体如下: 匀速运动步骤: 1. 清除定时器 2. 开启定时器 3. 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动距离 运行效果截图如下: div的匀速运动(简单运动)示例: <!doctype html> <html> <head> <meta charset="utf-8&

  • 原生javascript实现匀速运动动画效果

    原生javascript实现匀速运动动画效果

    本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;

  • JavaScript中的匀速运动和变速(缓冲)运动详细介绍

    一个div的运动其实就是它与浏览器边框的距离在变动.如果他变化的速率一定,那就是匀速运动:如果变化的速率不一定,那么就是变速运动.当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动. 其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离. 比如匀速运动: 进入定时器:(每隔30ms做) if(是否到达终点) { 停止定时器} else do{ 改变距离} 改变距离的方法决定是匀速还是变速(缓冲)运动. 匀速的比如: 复制代码 代码如下

  • 浅谈Javascript中匀速运动的停止条件

    浅谈Javascript中匀速运动的停止条件

    我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug.这里加了两个标杆用于测试 复制代码 代码如下: <style type="text/css">             #div1 {                 width: 100px;                 height: 100px;                 position: absolute;                 background: red;

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

    本文实例为大家分享了js实现单方向匀速运动的具体代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id='box'></div> <sc

  • JS指定音频audio在某个时间点进行播放

    前言: 今天接到一个需求,需要获取某个.mp3音频文件的时间长度和指定音频audio在某个时间点进行播放(比如说这个视频有4分钟,我要让它默认从第2秒的时候开始播放),这里当然想到了H5中的audio元素,当然我们平时看这个标签上显示的音频时间格式是时:分:秒的格式的因此需要涉及到秒和时间格式的转化.因为刚开始对这块十分的陌生,最后通过查阅了网上的一些资料,最终完美的把这些功能点做好了.在这里分享一下,希望能够帮助有需要的小伙伴. 获取音频时长: function getAudioDuratio

  • js指定日期增加指定月份的实现方法

    前言 本文主要给大家介绍的是关于js实现指定日期增加指定月份的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 首先,大致思路为: 1. 先将字符串格式的时间类型转化为Date类型 2. 再将Date类型的时间增加指定月份 3. 最后将Date类型的时间在转化为字符串类型 示例代码: 1. 先将字符串格式的时间类型转化为Date类型 var str = '2018-01-01 00:00:00'; //字符串格式的时间类型 var str1 = str.replace(/

  • JS实现指定区域的全屏显示功能示例

    本文实例讲述了JS实现指定区域的全屏显示功能.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net js指定区域全屏</title> <style> #fulldiv { background: #fff; w

  • JS将指定的某个字符全部转换为其他字符实例代码

    var str = "pig cat fish.dog horse monkey bear.lion.fox"; 笔者在这里定义了一个字符串 如果使用for循环遍历字符串,内部使用replace函数的话 for (j = 0; j <= str.length; j++) { if (str.charAt(j) == "o") { str.replace("o", "*"); } } 像上面这样 因为replace是有返回

  • 基于JavaScript实现定时跳转到指定页面

    在某些场景下,需要网页在指定的时间后,网页能够自动跳转到指定页面,比如在无法找到指定网页的情况下,就会显示之前设置好的404页面,并且跳转到指定的页面,下面就是一段代码实现了此效果. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/&q

  • JS中表单的使用小结

    1.javascript刷新页面的方法       window.location.reload(); 使用window.open()弹出的弹出窗口,刷新父窗口    window.opener.location.reload() 使用window.showDialog弹出的模式窗口    window.dialogArguments.location.reload(); 2.javascript弹出窗口的两种实现方式 ---下面给两个弹出屏幕居中窗口的例子 window.open()方式 复制

  • webpack打包js的方法

    webpack打包js的方法

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 在代码实践之前,先说一写webpack的基础知识. 1.为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 模块化,让我们可以把复杂的程序细化为小的文件; 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能

  • 手把手教你使用TypeScript开发Node.js应用

    为什么要使用TypeScript? 为了减少代码编写过程中出现的错误,以及更好的维护你的项目,本文将手把手教你配置一个简单的开发环境来编写Node.js的应用程序,创建这样的一个开发环境有很多方式,这只是其中一种,希望对你有所帮助! 手把手教你使用TypeScript开发Node.js应用 首先配置package.json 因为要在项目中使用Webpack,所以首先得创建一个package.json文件,我们可以使用npm init来生成 { "name": "start&q

  • Nuxt.js实战和配置详解

    前段时间刚好公司有项目使用了Nuxt.js来搭建,而刚好在公司内部做了个分享,稍微再整理一下发出来.本文比较适合初用Nuxt.js的同学,主要讲下搭建过程中做的一些配置.建议初次使用Nuxt.js的同学先过一遍官方文档,再回头看下我这篇文章. 一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比  1. build后目标产物不同 vue: dist nuxt: .nuxt 2. 网页渲染流

随机推荐