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

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

我们先来看下之前的运动框架,以下是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. 解决升级Xcode后插件不能使用的问题

    从Xcode 5开始,苹果要求加入UUID证书从而保证插件的稳定性.因此Xcode版本更新之后需要在插件的Info.plist文件中添加当前Xcode的UUID. 具体步骤如下: 1.获取Xcode的 ...

  2. 客户端js判断文件类型和文件大小即限制上传大小

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. JS 一个修改ul的小示例

    javascript提供了innerHTML属性可以获取和设置对象的文本内容. 下面实例演示——单击<ul>下的<li>标签后,改变其显示值: 1.HTML结构 <ul  ...

  4. has leaked ServiceConnection com.baidu.location.LocationClient

    02-06 05:01:52.806: E/ActivityThread(1120): Activity com.project.xxxActivity $1@45fc5af8 that was or ...

  5. 优酷播放器demo

    <!DOCTYPE html> <html lang="en-US"> <head> <meta http-equiv="Con ...

  6. A + B Problem II---hdu1002

    A + B Problem II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  7. 使用StackTrace堆栈跟踪记录详细日志（可获取行号）

    上一篇我们提到使用.NET自带的TraceSource实现简单的日志,具体请看<轻松背后的N+疲惫——系统日志>,这一篇注意想讲的是日志的详细记录,包含请求开始到结束的过程中调用的方法链以 ...

  8. SQL Server 备份的 8 种方法。

    方法 1. 完整备份 方法 2. 差异备份 方法 3. 部分备份(备份数据库的read_write部分) 方法 4. 文件备份 方法 5. 文件组备份 方法 6. 只复制备份 方法 7. 日志备份 - ...

  9. SQL Server 与 Windows 内存使用上的约定

    什么时候SQL Server 会释放出自己的内存!以提供给别的程序用呢? --------------------------------------------------------------- ...

  10. Python 函数 切片 迭代 列表生成器

    函数 编写     定义一个函数要用def语句    def sum(i,n):   ⚠有冒号 返回多值     实际上是返回一个tuple 定义默认参数    默认参数的作用是简化调用   def ...