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

一个div的运动其实就是它与浏览器边框的距离在变动。如果他变化的速率一定，那就是匀速运动；如果变化的速率不一定，那么就是变速运动。当，变化率与聚离浏览器边框的距离成比例的话，那么就可以说是div在做缓冲运动。
其实，很简单，就是用一个定时器（timer），每隔一段时间来改变div聚浏览器边框的距离。

比如匀速运动：

进入定时器：（每隔30ms做）
if(是否到达终点)
{ 停止定时器}
else do{ 改变距离}

改变距离的方法决定是匀速还是变速（缓冲）运动。

匀速的比如：


代码如下:

var timer=null;
function startMove()
{

var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function () {
var iSpeed=1;

if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}
},30);
};

缓冲运动:


代码如下:

var timer=null;
function startMove()
{
var iTarget=300;

var oDiv=document.getElementById('div1');

clearInterval(timer);
timer=setInterval(function () {
var iSpeed=(iTarget-oDiv.offsetLeft)/8;

iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

iSpeed=Math.ceil(iSpeed);
if(oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}
document.title=oDiv.style.left+' '+iSpeed;
},30);
};

这样，一个运动框架就写好了！原理很简单，不过还有待完善。慢慢来吧！

赞 (0)

相关推荐

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

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

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

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

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

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

  • 浅谈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

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

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

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

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

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

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

    javascript匀速运动实现方法分析

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

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

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

  • JavaScript 中的引用类型Date 和RegExp的详细介绍

    目录 引用类型 & 引用值的理解 Date 引用类型 Date.parse()方法 Date.UTC()方法 继承的方法 RegExp RegExp 实例方法 exec() test() 继承的方法 引用类型 & 引用值的理解 引用值(或者对象)是某个特定引用类型的实例. 在ECMAScript中,引用类型是把数据和功能组织到一起的结构,经常被人错误的称作“类”.虽然从技术上讲JavaScript 是一门面向对象语言,但ECMAScrtipt 缺少传统的面相对象语言所具备的某些基本结构,包

  • Javascript中的异步编程规范Promises/A详细介绍

    Javascript中的异步编程规范Promises/A详细介绍

    Javascript里异步编程逐渐被大家接受,先前大家一般通过回调嵌套,setTimeout.setInterval等方式实现,代码看起来非常不直观,不看整个代码逻辑很难快速理解.Javascript里异步函数大概有I/O函数(Ajax.postMessage.img load.script load等).计时函数(setTimeout.setInterval)等. 这些我们都很熟悉,在复杂的应用中往往会嵌套多层,甚至以为某些步骤未完成而导致程序异常,最简单的例子:比如你往DOM中注入节点,你必

  • javascript中的变量作用域以及变量提升详细介绍

    变量作用域"一个变量的作用域表示这个变量存在的上下文.它指定了你可以访问哪些变量以及你是否有权限访问某个变量." 变量作用域分为局部作用域和全局作用域. 局部变量(处于函数级别的作用域)不像其他对面对象的编程语言(比方说C++,Java等等),javascript没有块级作用域(被花括号包围的):当是,javascript有拥有函数级别的作用域,也就是说,在一个函数内定义的变量只能在函数内部访问或者这个函数内部的函数访问(闭包除外,这个我们过几天再写个专题). 函数级别作用域的一个例子

  • Mybatis中SqlMapper配置的扩展与应用详细介绍(1)

    奋斗了好几个晚上调试程序,写了好几篇博客,终于建立起了Mybatis配置的扩展机制.虽然扩展机制是重要的,然而如果没有真正实用的扩展功能,那也至少是不那么鼓舞人心的,这篇博客就来举几个扩展的例子. 这次研读源码的起因是Oracle和MySQL数据库的兼容性,比如在Oracle中使用双竖线作为连接符,而MySQL中使用CONCAT函数:比如Oracle中可以使用DECODE函数,而MySQL中只能使用标准的CASE WHEN:又比如Oracle中可以执行DELETE FORM TABLE WHER

  • Java中关于Collections集合工具类的详细介绍

    Java中关于Collections集合工具类的详细介绍

    Collections 是一个操作 Set.List 和 Map 等集合的工具类. Collections 中提供了一系列静态的方法对集合元素进行排序.查询和修改等操作,还提供了对集合对象设置不可变.对集合对象实现同步控制等方法. 排序操作 reverse(List):反转 List 中元素的顺序 shuffle(List):对 List 集合元素进行随机排序 sort(List):根据元素的自然顺序对指定 List 集合元素按升序排序 sort(List,Comparator):根据指定的 C

  • JavaScript中检查对象property的存在性方法介绍

    JavaScript中检查对象property的存在性方法介绍

    在JavaScript中,可以用四种方法来检查某个对象o是否拥有property x: 1."x" in o.in操作符可用于检查对象o中是否有x这个property.x可以是对象自身的(Own Property),也可以是从原型对象中继承而来的:x可以是enumerable的property,也可以是非enumerable的property. 2.o.x.可以通过访问o.x语句,判断其结果是否为undefined来确认x是否存在,其作用范围与in操作符相同.与in操作符不同的是:如果

  • JavaScript中的object转换函数toString()与valueOf()介绍

    JavaScript中,object转换为boolean的操作非常简单:所有的object转换成boolean后均为true:即使是new Boolean(false)这样的object在转换为boolean后仍然为true. 复制代码 代码如下: var x = new Boolean(false); if(x){   console.log("x is true"); } 在将object转换为string或者number时,JavaScript会调用object的两个转换函数:t

  • JavaScript中对象property的读取和写入方法介绍

    JavaScript中,可以通过点号操作符"."或者中括号操作符"[]"来对对象的property进行读取和写入: 复制代码 代码如下: var o = {x:1, y:2}; console.log(o.x);//1 console.log(o["y"]);//2 o.y = 7; console.log(o["y"]);//7 值得注意的是,如果使用中括号操作符,则操作符内的值类型必须是string,或者能够转换成stri

  • JavaScript 中的日期和时间及表示标准介绍

    前言 本篇的介绍涵盖以下部分: 1. 时间标准指的是什么?UCT和GMT 的概念.关联和区别? 2. 时间表示标准有哪些? 3. JS 中时间的处理 日期时间标准 日期的标准就不多说了 -- 公元纪年 是为纪念犹太人耶稣(基督)的诞生.他诞生的那一年为公元1年,诞生之前的年份称为"公元前n年" 简单来说,时间的标准就是以什么时间为起点开始计时.对于年份来说,举例来说,如果不使用公元纪年法,估计全世界交流起来就困难重重了(新中国54年,估计很把很多老外整晕) 时间标准其实挺多的. 原子时

随机推荐