第一部分：HTML内容：

<script src="6-1.js"></script>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div');
            var timer=null;
            oDiv.onclick=function(){
                move(oDiv,600,3000,'width',function(){
                    move(oDiv,600,3000,'left');
                });
            };
        }
    </script>
</head>
<body>
<div id="div"></div>
</body>
第二部分：6-1.js内容：
function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name]
    }
}
function move(obj,iTarget,time,name,fn){
    var timer=null;
    clearInterval(obj.timer);
    var start=parseFloat(getStyle(obj,name));//getstyle传的是带单位的，所以要加parsefloat，并且便于对opacity进行转换。
    var dis=iTarget-start;
    var count=Math.floor(time/30);
    var step=dis/count;
    var n=0;
    obj.timer=setInterval(function(){
        n++;
        var cur = start + n * dis / count;
        if(name=='opacity'){
            obj.style.opacity=cur;
            obj.style.filter = 'alpha(opacity:' + cur * 100 + ')';
        }else{
            obj.style[name]=cur+'px';
        }
        if(n==count){
            clearInterval(obj.timer);
            fn && fn();
        }
    },30)
}

因为封装好了框架，所以，在进行类似的代码的编写的时候，可以直接调用move函数。

Javascript之链式运动框架1的更多相关文章

  1. javascript链式运动框架案例

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

  2. Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  3. （43）JS运动之链式运动框架

    链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个參数function,这个function表示下一个要运行的动作.详细代码例如以下: <!DOCTYPE HTML> &l ...

  4. JS之链式运动，及任意值运动框架，包括透明度的改变

    链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数, function ...

  5. js动画之链式运动

    链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...

  6. day40—JavaScript多物体运动框架

    转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...

  7. JavaScript之链式结构序列化

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

  8. JavaScript之链式结构序列化1

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

  9. javascript学习之运动框架

    模仿新浪博客首页的,最新评论: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"&g ...

随机推荐

  1. tomcat 设置集群

    本文介绍的是使用tomcat内置的集群功能.跟官方文档的区别是没有使用广播,而是使用了static membership的方式. 需要修改server.xml 放在哪个元素下来的,是Host还是啥记不 ...

  2. RDIFramework.NET ━ 9.13 系统日志与系统异常管理 ━ Web部分

    RDIFramework.NET ━ .NET快速信息化系统开发框架 9.13  系统日志与系统异常管理 -Web部分  一个软件在投入运行时不可能没有任何异常,在软件发生异常时及时的记录下来,也好我 ...

  3. Mysql数据库优化

    to be add... --------------------------------------------------------------------------------------- ...

  4. linux--------wdcp中的各种坑。

    1.刚买的空间客服给安装了wdcplinux,结果上去一看PHP是5.2版本的,这不是搞笑嘛.然后就有了下面的升级: 复制这条命令回车然后敲Y就可以: wget http://soft.itbulu. ...

  5. Android View坐标Left, Right, Top, Bottom

    Android View坐标Left, Right, Top, Bottom 1.分析说明Left, Right, Top, Bottom View中对于该字段说明如下,相对父布局的的位置 相对父布局 ...

  6. 一个Demo学完Android中所有的服务(转)

    说明:这个例子实现了Android中常见的许多服务,下面是实现的截图 接下来,以源代码的方式分析这个例子   1.MainActivity--主界面 这个类主要是实现用户所看到的这个Activity, ...

  7. MVC筛选自定义属性下拉表

    MVC筛选自定义属性下拉表 string CompanyId = ""; CompanyId = ManageProvider.Provider.Current().Company ...

  8. 【svn】一个设置，少写几个字

    以下场景仅适用于修改bug的时候,在提交代码的时候少写几个字,嘿嘿: 1.打开[SVN 属性],在代码目录右键 2.打开BUG跟踪设置窗口 3.输入BUG的URL前缀以及%BUGID%,如 复选框,建 ...

  9. reqiurejs学习

    RequireJS 优化 Web 应用: http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/ 1.模块之间的依赖关系 2.如 ...

  10. 一面cvte

    昨天上午去cvte参加一面,和好基友一块,离学校很近,10点多一点到了,一出电梯,傻眼了(不是美女很多),是人真的很多,等了2个小时才轮到我们,一个hr面3个人,我和基友,还有一个本科小盆友,问了5个 ...