第一部分：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. JavaScript实现绑定DOM的定时器插件

    问题 使用原生的setTimeout和setInterval仅仅能够实现, 定时执行事件处理函数, 在网页开发中, 往往会出现一种情况,定时器用于定时更新某个页面区域的数据, 往往在页面加载之后, 就 ...

  2. [Android Tips] 12. How to Create a Dash Line Shape

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  3. spring设置webAppRootKey

    今天一个同事来问webAppRootKey 在哪设置的 <context-param> <param-name>webAppRootKey</param-name> ...

  4. Latex 学习

    Latex 学习 @(05.2 Latex)[latex][基础教程] 这篇文章是关于latex基础教程.pdf的一个总结. 基本知识 基础 1. 空格 多个空格会被视为一个空格 单个回车会被视为一个 ...

  5. 学习OpenCV——Surf（特征点篇）&flann

    Surf(Speed Up Robust Feature) Surf算法的原理                                                             ...

  6. 1029-c语言文法的理解

    <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...

  7. zTree插件之单选下拉菜单代码

    <!--ztree树结构--> <link rel="stylesheet" type="text/css" href="asset ...

  8. Java多线程编程——进阶篇二

    一.线程的交互 a.线程交互的基础知识 线程交互知识点需要从java.lang.Object的类的三个方法来学习:    void notify()           唤醒在此对象监视器上等待的单个 ...

  9. 无法解决 equal to 运算中 "Chinese_PRC_CI_AS" 和 "SQL_Latin1_General_CP1_CI_AS" 之间的排序规则冲突。

    select * from a, b  where a.Code=b.Code collate Chinese_PRC_CI_AS

  10. Android PullToRefresh （GridView 下拉刷新上拉加载）

    做这个需要自己去git hub上下载个pull-to-refresh 里面有个library为依赖包自己导到自己的项目中 (下载地址:https://github.com/chrisbanes/And ...