所谓链式运动，就是一环扣一环。我们的很多运动实际上来说指的就是分阶段的，第一个阶段动完，下个阶段开始动。

这个链式运动框架就是用来处理这些问题的。

我们先来看下之前的运动框架,以下是Javascript 代码

function getStyle(obj, name) {

    if (obj.currentStyle) {

        return obj.currentStyle[name];

    } else {

        return getComputedStyle(obj, null)[name];

    }

}

function startMove(obj, attr, iTarget) {

    clearInterval(obj.time);

    obj.time = setInterval(function() {

        var cur = 0;

        if (attr == 'opacity') {

            cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);

        } else {

            cur = parseInt(getStyle(obj, attr));

        }

        var speed = (iTarget - cur) / 6;

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

        if (cur == iTarget) {

            clearInterval(obj.time);

        } else {

            if (attr == 'opacity') {

                obj.style.filter = 'alpha(opacity=' + cur + speed + ')';

                obj.style.opacity = (cur + speed) / 100;

            } else {

                obj.style[attr] = cur + speed + 'px';

            }

        }

    }, 30);

}

实际上来说他就是相当于一个阶段型的运动框架，一个物体运动到某个地方就停下来了。

那么怎么能实现链式运动呢？

我们在加一个参数fnEnd ,这个是个函数，他会在运动结束的时候被调用。

当然这个函数可以传可以不传，所以需要做个判断。只有当传入的时候在调用即可。

原理就是： 一个运动完成 在开始下次的运动。

这样就能够完成链式运动，简单吧，让我们看看代码。

<style type="text/css">

            #div1{width: 100px; height: 100px; background: red;}

        </style>
<script src="js/move_lianshi.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            window.onload=function(){

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

                oDiv.onmouseover=function(){

                    startMove(oDiv,'width',300,function(){

                        startMove(oDiv,'height',300);

                    });

                };

            }

        </script>

    </head>

    <body>

        <div id="div1">

        </div>

    </body>

Javascript:

function getStyle(obj, name) {

    if (obj.currentStyle) {

        return obj.currentStyle[name];

    } else {

        return getComputedStyle(obj, null)[name];

    }

}

function startMove(obj, attr, iTarget,fnEnd) {

    clearInterval(obj.time);

    obj.time = setInterval(function() {

        var cur = 0;

        if (attr == 'opacity') {

            cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);

        } else {

            cur = parseInt(getStyle(obj, attr));

        }

        var speed = (iTarget - cur) / 6;

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

        if (cur == iTarget) {

            clearInterval(obj.time);

            if(fnEnd)fnEnd();

        } else {

            if (attr == 'opacity') {

                obj.style.filter = 'alpha(opacity=' + cur + speed + ')';

                obj.style.opacity = (cur + speed) / 100;

            } else {

                obj.style[attr] = cur + speed + 'px';

            }

        }

    }, 30);

}

这样Div就会先变宽在变高。

我们现在这个运动框架还是会有局限性，那是什么呢？

那么就是不能同时运动，也就是说我想让Div 同时变大变宽 那又怎么办呢？

在下一次更新的时候，我们会解决这个问题，并且推出一个完美的运动框架，这个运动框架能够支持大多数的运动。

敬请期待~

Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理的更多相关文章

  1. Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理

    大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...

  2. Javascript 可同时变大变宽等一系列效果运动框架——逐行分析代码，让你轻松了解运动的原理

    等待已久的可变大,变宽 等一系列效果运动框架出炉了,现在还是个初级版本,能满足需求.我们看看是如何实现的. 我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如: oDiv.style.h ...

  3. javascript链式运动框架案例

    javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...

  4. Javascript 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理

    看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...

  5. Javascript 链式作用域 function fn(){}和var fn=function(){}区别

    其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但 ...

  6. Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理

    我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...

  7. JavaScript 链式结构序列化详解

    一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } swi ...

  8. 浅析 JavaScript 链式调用

    对$函数你已经很熟悉了.它通常返回一个html元素或一个html元素的集合,如下: function$(){ var elements = []; for(vari=0,len=arguments.l ...

  9. iOS端JSON转Model链式编程框架SuperKVC使用方法与原理

    背景 在client编程中.字典转模型是一个极为常见的问题,苹果提供了KVC来实现NSDictionary到Model的注入,可是KVC仅仅能进行单层浅注入.且无法处理类型转换.key与属性名不正确应 ...

随机推荐

  1. WindowsForm 增 删 查 改

    首先是连接数据库  在数据库里写代码 建立一个数据库下面是代码 create database JinXiaoCun go use JinXiaoCun go create table users ( ...

  2. php工厂设计模式

    class DbFactory { private $errmsg = '未找到类文件'; static function factory($className){ $className = strt ...

  3. H - Ones

    Description Given any integer 0 <= n <= 10000 not divisible by 2 or 5, some multiple of n is a ...

  4. 原生化：AnDevCon 2014 McVeigh 的主题演讲

    作者:Jeff McVeigh(Intel) 基于(至少部分)NDK的原生安卓应用程序占现在前1000 强的 60% 以上.该增长的原因很简单:开发商需要为用户提供超卓的体验(包括灵敏的反应.与丰富的 ...

  5. 不同分辨率下获取不同js文件

    获取当前网站的目录  //js获取网站根路径(站点及虚拟目录),获得网站的根目录或虚拟目录的根地址 function getRootPath(){ //整个域名(如:http://vc3.cn/ind ...

  6. Python之路第九天，高级(1)-网络编程

    SOCKET编程 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. so ...

  7. 利用VisualVM监测Azure云服务中的Java应用

    在做Java开发的时候,我们需要在上线之前对程序进行压力测试,对程序的性能进行全面的监控,了解JVM的CPU,内存,GC,classes,线程等等信息,或者在程序上线运行的过程当中以便于诊断问题或者对 ...

  8. （转载）Eclipse基金会涉足物联网，M2M标准是否已获东风？

    摘要:相信大部分的开发者都使用过Eclipse IDE,然而Eclipse基金会有的不只是集成开发环境,其托管的开源项目已达250余个.近日该基金会宣布启动物联网项目,旨在推动M2M标准的前行! Ec ...

  9. Virtualbox下实现Ubuntu虚拟机和win7主机文件共享（很简单，亲自试用，按此步骤一般都会成功）

    最近做一个操作系统实验,第一个实验即是实现Ubantu虚拟机与主机之间的共享. 本例用的是VirtualBox虚拟机,若使用Vmware WorkStation虚拟机则方法与下文介绍略有不同,但基本相 ...

  10. linux脚本实例之while

    写一个脚本,执行后,打印一行提示“Please input a number:",要求用户输入数值,然后打印出该数 值,然后再次要求用户输入数值.直到用户输入"end"停 ...