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

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

我们先来看下之前的运动框架,以下是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. 【JSONKit】序列化Dictionary崩溃

    jsonkit通过Dictionary转换成JSON字符串时总是崩溃. 解析代码: 崩溃地点 分析是因为我的参数中全是数字   找了一下原因,不知道知道怎么设置,(求大神指点) 这里有一个折中办法使用 ...

  2. MVC和传统的以模板为中心的web架构比较

    特性 以模板为中心 MVC架构 页面产生方式 运行并替换标签中的语句 由模板引擎生产HTML页面 路径解析 映射到文件系统路径,也可以通过rewrite等技术来重定向 由控制器定义,并可以通过路由系统 ...

  3. ps aux 中的状态说明

    D    不可中断     Uninterruptible sleep (usually IO)R    正在运行,或在队列中的进程S    处于休眠状态T    停止或被追踪Z    僵尸进程W  ...

  4. 无意发现vim里插入模式可以借助Alt键输入一些特殊字符

    无意发现vim里插入模式可以借助Alt键输入一些特殊字符.如: Alt+w: ÷ Alt+:: » Alt+f  :  æ Alt+ . :  ® Alt+ ? :  ¯...

  5. (续)顺序表之单循环链表(C语言实现)

    单循环链表和单链表的唯一区别在于单循环链表的最后一个节点的指针域指向第一个节点, 使得整个链表形成一个环. C实现代码如下: #include<stdio.h> typedef struc ...

  6. 【具体数学--读书笔记】1.1 The Power of Hanoi

    这一节借助汉诺塔问题引入了"Reccurent Problems". (Reccurence, 在这里解释为“the solution to each problem depend ...

  7. C++中的动态类型与动态绑定、虚函数、运行时多态的实现

    动态类型与静态类型 静态类型 是指不需要考虑表达式的执行期语义,仅分析程序文本而决定的表达式类型.静态类型仅依赖于包含表达式的程序文本的形式,而在程序运行时不会改变.通俗的讲,就是上下文无关,在编译时 ...

  8. Truck History（kruskal+prime）

    Truck History Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) Tota ...

  9. hdu 4753 Fishhead’s Little Game

    状态压缩dp解博弈问题(记忆化搜索).比赛的时候最后才开始做这道题,而且当时不知道为什么一直犯一些很2B的问题,导致没能ac,晚上看了看原先的代码,改了一下就MLE了...我原先是开的dp[1 < ...

  10. jQuery滑动选取数值范围插件

    HTML 首先载入jQuery库文件以及jRange相关的css文件:jquery.range.css和插件:jquery.range.js <script src="jquery.j ...