一、javascript的匀速运动

关于物体的javascript匀速运动要点分析：

1.物体关于运动的时候，我们要打开定时器

2.打开定时器的时候我们记得要在停止的时候关闭定时器，同时应该注意的是一开始加载的时候，我们也应该关闭定时器，避免多次重复的加载，导致的加速运动。

3.并且速度初始化为0

实施方法：

判断物体的偏移是否小于目标值（判断运动的速度）

小于 可以继续运动 大于向右运动

2。先判断什么地方停下来？
判断条件：物理的偏移量小于7就是不能超过速度的值时
直接让它对齐

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript匀速运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var timer = null;
function startMove(obj, iTarget)
{
 clearInterval(timer);
 timer = setInterval(function(){
  var iSpeed = 0;
  if(obj.offsetLeft < iTarget)
  {
   iSpeed = 7;
  }
  else
  {
   iSpeed = -7;
  }
  if( Math.abs( obj.offsetLeft - iTarget ) < 7 )
  {
   clearInterval(timer);
   obj.style.left = iTarget + 'px';
  }
  else
  {
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body>
<button id="btn1">移动</button>
<div id="div1"></div>
<!--span为一条线-->
<span></span>
</body>
</html>

　　

二、javascript变速运动

要点分析：

1.如何做到变加速运动？利用目标值与偏差值（obj.offsetLeft）的差去除以一个定值，因为偏差值（obj.offsetLeft）会随着时间的改变而改变，从而达到一个变速的目的

2.判断速度大于0 向上取整 小于0向下取整

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>缓冲运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>

<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var timer = null;
function startMove(obj, iTarget)
{
 clearInterval(timer);
 timer = setInterval(function(){
  var iSpeed = (iTarget - obj.offsetLeft)/8;
  iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  if(iTarget==obj.offsetLeft){
   clearInterval(timer);
  }else{
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="移动" />
<div id="div1"></div>
<span></span>
</body>
</html>

　　

三、javascript的弹性运动

1.开始做一个减速运动

2.在减速运动中添加一个摩擦运动

//做一个加速度减缓的变加速欲动  加速度
 iSpeed += (iTarget - obj.offsetLeft)/5;
 //控制速度的减缓量  摩擦力
 iSpeed *= 0.7;
 //向左移动的距离
 left += iSpeed;

　　

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
 startMove(oDiv, 300);
 };
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 //做一个加速度减缓的变加速欲动  加速度
 iSpeed += (iTarget - obj.offsetLeft)/5;
 //控制速度的减缓量  摩擦力
 iSpeed *= 0.7;
 //向左移动的距离
 left += iSpeed;
 //速度小于1并且距离差小于1时停止并且将目标值赋予块
 if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
  clearInterval(obj.timer);
  obj.style.left = iTarget + 'px';
 }else{
  obj.style.left = obj.offsetLeft + iSpeed + 'px';
 }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>
</body>
</html>

　　

关于javascript的运动教程的更多相关文章

  1. JavaScript 核心参考教程 内置对象

    这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft).Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 ...

  2. Canvas API -- JavaScript 标准参考教程（alpha）

    Canvas API -- JavaScript 标准参考教程(alpha) Canvas API

  3. 大量Javascript/JQuery学习教程电子书合集

    ［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  4. ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  5. 阅读：重新介绍 JavaScript（JS教程）

    这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会 在线调试代码工具:https://codepen.io/pen 引言 分歧根源:名字Javascript和Java有 ...

  6. 急速JavaScript全栈教程

    3 天前  ·  3k 次阅读 急速JavaScript全栈教程 javascript node.js  mongodb 140 自从一年前发布了Vuejs小书的电子书,也有些日子没有碰过它们了,现在 ...

  7. [转载]javascript+ajax+jquery教程11--正则表达式

    原文地址:javascript+ajax+jquery教程11--正则表达式作者:morflame 正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个 ...

  8. JavaScript全栈教程

    这是小白的零基础JavaScript全栈教程. JavaScript是世界上最流行的脚本语言,因为你在电脑.手机.平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaSc ...

  9. day38—JavaScript的运动基础-匀速运动

    转行学开发,代码100天——2018-04-23 一.运动基础框架 JavaScript的运动可以广义理解为渐变效果,直接移动效果等,图网页上常见的“分享到”,banner,透明度变化等.其实现的基本 ...

随机推荐

  1. SQL SERVER 竖表变成横表

    现有数据如下: Sql: select a.MODELID, max( case a.PNAME when'计划开始' then a.PVALUE end) as RStart, max( case ...

  2. C#开发微信门户及应用(33)--微信现金红包的封装及使用

    我在上篇随笔<C#开发微信门户及应用(32)--微信支付接入和API封装使用>介绍为微信支付的API封装及使用,其中介绍了如何配置好支付环境,并对扫码支付的两种方式如何在C#开发中使用进行 ...

  3. Java中的多线程你只要看这一篇就够了

    学习Java的同学注意了!!! 学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入Java学习交流群,群号码:279558494 我们一起学Java! 引 如果对什么是线程.什么是进程仍存有疑惑, ...

  4. Linux常用命令大全

    系统信息 arch 显示机器的处理器架构(1)  uname -m 显示机器的处理器架构(2)  uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIO ...

  5. CartO

    Carto documentation The following is a list of properties provided in CartoCSS that you can apply to ...

  6. android 之 启动画面的两种方法

    现在,当我们打开任意的一个app时,其中的大部分都会显示一个启动界面,展示本公司的logo和当前的版本,有的则直接把广告放到了上面.启动画面的可以分为两种设置方式:一种是两个Activity实现,和一 ...

  7. Oracle XMLTable 使用教程与实例

    从Oracle 10g开始,甲骨文公司新增了XQuery和XMLTable两个功能作为处理XML的武器. XMLQuery一样,您可以使用XQuery语言构造XML数据和查询XML和关系数据.你可以使 ...

  8. MySQL 导入数据

    MySQL中可以使用两种简单的方式来导入MySQL导出的数据. 使用 LOAD DATA 导入数据 MySQL 中提供了LOAD DATA INFILE语句来插入数据. 以下实例中将从当前目录中读取文 ...

  9. Linux安装详情图解

    本文讲解Linux的安装 因为是纯属学习使用,所以安装在了虚拟机里   需要软件: VirtualBox-5.1.10 ubuntu-16.04.1-desktop-amd64 说明: 虚拟机可以选择 ...

  10. Shell命令和流程控制

    Shell命令和流程控制 在shell脚本中可以使用三类命令: 1)Unix 命令: 虽然在shell脚本中可以使用任意的unix命令,但是还是由一些相对更常用的命令.这些命令通常是用来进行文件和文字 ...