一、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. NopCommerce 在Category 显示Vendor List列表

    实现效果如下: 1.在前台Web的Category Menu显示 Vendor; 2.点击Vendor 显示Vendor List列表: 主要配置步骤: 1.运行网站 Admin 后台   Categ ...

  2. vs2015 已经支持开发asp .net core 1.0 rc2 程序了

    vs2015 已经支持开发asp .net core 1.0 rc2 程序了 http://mp.weixin.qq.com/s?__biz=MzI0MzM1ODczOQ==&mid=2247 ...

  3. input文本框录入字母自动大写

    向文本框输入文字时,如何让小写字母自动变为大写呢?有一个简单有效的做法是用CSS. <input name="t1" type="text" style= ...

  4. jq制作圣诞主题页面

    今天制作的是有飘雪效果的圣诞主题页面,个人灰常喜欢. 首先还是放张效果图: 当看到这这页面的时候我们要注意四点: 1.图片的轮播 2.文字的滚动效果 3.音乐播放 4.飘雪效果 那我们就一点一点来完成 ...

  5. javascript的defer和async的区别。

    我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...

  6. 非域客户端的office使用RMS加密服务出现‘介绍“信息权限管理服务”’服务的提示

    环境:office2007,需要使用windows RMS服务,客户机处于工作组模式,如图: 出现这个说明客户机没有发现RMS服务,可以通过导入注册表解决,如下: Windows Registry E ...

  7. Android 绘制view的小知识点

    [onMeasure] 直接继承view或ViewGroup的自定义控件需要重写onMeasure方法并设置wrap_content时的自身大小,否则在布局中使用wrap_content就相当于mat ...

  8. 用Kotlin语言重新编写Plaid APP：经验教训(II)

    原文标题:Converting Plaid to Kotlin: Lessons learned (Part 2) 原文链接:http://antonioleiva.com/plaid-kotlin- ...

  9. 安装cocoapods以及更新cocoapods

    安装 1.设置ruby的软件源 这是因为ruby的软件源rubygems.org因为使用亚马逊的云服务,被我天朝屏蔽了,需要更新一下ruby的源,过程如下: gem sources -l #(查看当前 ...

  10. iOS 自定义方法 - UIView扩展

    示例代码 //#import <UIKit/UIKit.h>@interface UIView (LPCView)/** 上 */@property CGFloat top;/** 下 * ...