第一部分：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. 解决编译错误: 非法字符: '\ufeff' 解决方案|错误: 需要class, interface或enum

    http://www.cnblogs.com/oymx/p/5353235.html 可以 note++打开  在格式里  选择utf-8 无bom格式编码 即可

  2. 第一次尝试编写java

    昨晚手贱,不小心把环境变量path里面都东西全删除了 然后上百度搜了一波又一波 最后还是复制达达的 感动 然后还是不行,最后发现错误竟然是分号用了汉字的分号而不是英文的分号 这个问题在编写C语言也出现 ...

  3. LaTeX学习教程

    本来我对LaTeX不是看好的,毕竟都是命令格式的.觉得有word就足够啦word可视化操作方便快捷. 但是由于要写论文等,在导师要求下潜心学习一下,不知不觉间被LaTeX的强大功能所吸引.现在很多出版 ...

  4. 十分钟学会python

    1.raw_input的使用 从键盘读取信息,返回字符串. 例: hrs = raw_input("Enter Hours:")pay=raw_input("Enter ...

  5. Eclipse设置代码模版

    设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元 ...

  6. IPC

    IPC，全名Inter Process Communication即进程间通讯，在同一台机器上的两个进程就用IPC，不能跨物理机器。IPC包括共享内存、队列、信号量等几种方式，由于IPC通讯效率之高， ...

  7. android opengl

    引用:http://weimingtom.iteye.com/blog/1616972 二维坐标系变换为原点在左上角(测试用) * GLES * JOGL * LWJGL * libgdx(使用g2d ...

  8. windows进程详解

    1:系统必要进程system process    进程文件: [system process] or [system process]进程名称: Windows内存处理系统进程描述: Windows ...

  9. 普华永道高级JAVA面试记录

    最近在考虑换个工作 原因?咱能不逗吗? 一面感觉发挥不错  二面之后累觉不爱  基本上浪费了半天的工资(好多钱啊~~~) PWD上海地址在浦东软件园  工作环境说实话没我现在工作的环境好,不过里面的人 ...

  10. mysql 插入中文报错: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Incorrect datetime value...

    总结写在前面, 总结: 当Java通过jdbc链接mysql插入中文时,要保证程序可以正常执行,而且插入的中文不会乱码, mysql服务器端,对数据表(不是数据库)的编码设置,要保证是支持中文的,例如 ...