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

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

我们先来看下之前的运动框架,以下是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. [转载]Matlab中fft与fftshift命令的小结与分析

    http://blog.sina.com.cn/s/blog_68f3a4510100qvp1.html 注:转载请注明出处——by author. 我们知道Fourier分析是信号处理里很重要的技术 ...

  2. bootstrap之 Badge 角标

    添加 .am-badge class 到 <div> 或者 <span> 元素. 默认样式     <span class="am-badge"> ...

  3. go JSON

    package utils import ( "encoding/json" "errors" ) func JsonToMap(text []byte) (m ...

  4. 发现一个不错的学习git的地方

    Git入门:http://rogerdudler.github.io/git-guide/index.zh.html 简洁.实用.高效的学习git基本操作的方式

  5. VS2003转VS2010 fatal error C1189: #error

    我自己的mfc的demo要转换编译环境出现以下编译错误: VS2010编译错误:fatal error C1189: #error : This file requires _WIN32_WINNT ...

  6. Oracle EBS-SQL (OM-4):检查发运网络.sql

    select          msn.FROM_ORGANIZATION_CODE 开始库存组织,         msn.FROM_ORGANIZATION_NAME 开始库存名称,        ...

  7. listview加载网络图片

    ListView加载网络数据和图片 2013-09-25 00:08:10|  分类: 默认分类 |  标签:android  |举报|字号 订阅     如,从服务器端获得商品名称.价格.简介和图片 ...

  8. 续上文----线性表之单链表(C实现)

    本文绪上文线性表之顺序表(C实现) 本文将继续使用单链表实现线性表的另外一种存储结构.这种使用链表实现的存储结构在内存中是不连续的. C实现代码如下: #include<stdio.h> ...

  9. 杭电oj1219 AC Me

    Tips:本题中,输入字符串之后,直接从头到尾处理一遍,调用函数判断是否是字母,不要自己写循环判断是否为字母,易超时! 不过本题中有一个疑问,自己最开始用C写的,一直是Time Limit Excee ...

  10. Stackoverflow上人气最旺的10个Java问题（转ImportNew）

    本文转自:http://www.importnew.com/16841.html 写的确实太好了 1.为什么两个(1927年)时间相减得到一个奇怪的结果? 如果执行下面的程序,程序解析两个间隔1秒的日 ...