第一部分：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. mac 启动 docker daemon

    我是用virtualbox安装的. 有一个小问题就是启动docker服务时会检查boot2docker是不是最新的. 由于github被封了,所以只能手动下 https://github.com/bo ...

  2. leetcode 223

    题目描述: Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is def ...

  3. svg学习（七）polygon

    <polygon> 标签用来创建含有不少于三个边的图形. <?xml version="1.0" standalone="no"?> & ...

  4. 完全偶图K(3,3)与完全图K5是否存在平面表示

    本文论述k(3, 3)与K5平面表示的存在性.首先给出图的平面表示的定义: 若可以在平面里画出一个图而让边没有任何交叉(边的交叉是指边的直线或弧线在它们的公共端点以外的地方相交),则这个图是平面性的. ...

  5. objective-c第六章课后练习6

    题6:接受从终端输入的整数,提取并用英语显示这个数的每一个数字,如932,显示nine three two (题目中注了.这个练习很难)的确有点难,自己想了很久网上也各种搜索.也算是找到参考了 cod ...

  6. C#文件与流(FileStream、StreamWriter 、StreamReader 、File、FileInfo、Directory、directoryInfo、Path、Encoding）

    (FileStream.StreamWriter .StreamReader .File.FileInfo.Directory.DirectoryInfo.Path.Encoding)     C#文 ...

  7. Android 开机启动

    创建一个Receiver,用来监听开机完毕: public class MyReceiver extends BroadcastReceiver { static final String actio ...

  8. Session与cookie的区别？

    1.cookie 是一种发送到客户浏览器的文本串句柄,并保存在客户机硬盘上,可以用来在某个WEB站点会话间持久的保持数据. 2.session其实指的就是访问者从到达某个特定主页到离开为止的那段时间. ...

  9. nodejs学习笔记

    这里有一段废话,我写了又删,删了又写,反复了十来次,最后还是把它删除了.不用想了,那是一段牢骚话兼有煽情意思. 好了,还是把我学习nodejs的笔记记录下来吧,一来复习巩固,加深印象,二来自己实践中出 ...

  10. C# 获取SqLite数据库表信息以及获取表内字段信息

    #region 最新数据表信息显示事件 /// <summary> /// 最新数据表信息显示事件 /// </summary> /// <param name=&quo ...