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 EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
jQuery拖动图片删除示例
May 10 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
js数组常用最重要的方法
Feb 04 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
浅谈js闭包理解
Mar 28 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 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
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
新浪的图片新闻效果
2007/01/13 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python编程入门的一些基本知识
2015/05/13 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
html5与css3小应用
2013/04/03 HTML / CSS
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
教师党性分析材料
2014/02/04 职场文书
献爱心倡议书
2014/04/14 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
学校百日安全活动总结
2015/05/07 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android