第一部分：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. iOS10 app连接不上网络的问题

    http://jingyan.baidu.com/article/29697b917f2069ab20de3c33.html

  2. Java基础之在窗口中绘图——填充星型（StarApplet 2 filled stars）

    Applet程序. import javax.swing.*; import java.awt.*; import java.awt.geom.GeneralPath; @SuppressWarnin ...

  3. CKplayer功能配置

    开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ! 博客分类: Javascript /Jque ...

  4. java实现求数组中元素第二大的元素

    /** * 找出数组中数第二大的值 * @param array * @date 2016-9-25 * @author shaobn */ public static void getMethod_ ...

  5. paper 106：图像增强方面的介绍

    图像增强是从像素到像素的操作,是以预定的方式改变图像的灰度直方图.有时又称为对比度增强,灰度变换.点运算不可能改变图像内的空间关系,输出像素的灰度值由输入像素的值决定.其作用: 对比度增强:扩展感兴趣 ...

  6. C#中把Datatable转换为Json的5个代码实例

    一. /// <summary> /// Datatable转换为Json /// </summary> /// <param name="table" ...

  7. 解决Failed to allocate memory: 8转

    解决Failed to allocate memory: 8 昨天换了x64的Win7,发现在Eclipse上启动模拟器的时候存在问题,当设置的模拟器分辨率大于400×800的时候会出现 Failed ...

  8. DIV 垂直 垂直水平 居中

    DIV 垂直 居中 让div居中对齐 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐.  .style{margin-left:auto;marg ...

  9. ubuntu登陆出现问题

    手贱改了用户root权限结果登陆时提示system administrator is not allowed to login from this screen(郁闷勒) 这时可以按ctrl+F2进入 ...

  10. 使用cygwin出现syntax error near unexpected token'$'do\r

    直接从csdn复制粘贴的.sh代码,放到cygwin下运行sh的时候出错syntax error near unexpected token'$'do\r 解决方法: 1.下载notepad++ 2. ...