<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="智能社 - zhinengshe.com" />

<meta name="copyright" content="智能社 - zhinengshe.com" />

<title>智能社 - www.zhinengshe.com</title>

<style>

*{margin:;padding:;list-style:none;}

#ul1{width:516px;height:516px; margin:10px auto; position:relative;}

#ul1 li{float:left;width:150px; height:150px; border:1px solid #; background:#ccc; margin:10px;}

</style>

<script src="move.js"></script>

<script>

window.onload = function(){

    var oBtn = document.getElementById("btn1");

    var oUl  = document.getElementById("ul1");

    var aLi  = oUl.children;

    //布局转换

    var aPos = [];

    for(var i = ; i < aLi.length; i++){

        aPos[i] = {left:aLi[i].offsetLeft,top:aLi[i].offsetTop};

        aLi[i].style.left = aPos[i].left + "px";

        aLi[i].style.top  = aPos[i].top  + "px";

    }

    for(var i = ; i < aLi.length; i++){

        aLi[i].style.position = "absolute";

        aLi[i].style.margin  = "";

    }

    var timer = null;

    oBtn.onclick = function(){

        var i = ;

        clearInterval(timer);

        timer = setInterval(function(){

            (function(index){

                move(aLi[i],

                     {width:,height:,left:,top:,opacity:},

                     {complete:function(){

                         //alert(index);

                         if(index == aLi.length - ){

                             //alert("运动完成");

                             i = aLi.length - ;

                             clearInterval(timer);

                             timer = setInterval(function(){

                                move(aLi[i],

                                     {

                                      width:,height:,

                                      left:aPos[i].left,top:aPos[i].top,

                                      opacity:

                                     }

                                );

                                i--;    

                                if(i == -){

                                    clearInterval(timer);

                                } 

                             },);

                         }

                     }

                });

            })(i);

            i++;

            if(i == aLi.length){

                clearInterval(timer);

            }

        },);

    };

};

</script>

</head>

<body>

<input id="btn1" type="button" value="收起来"/>

<ul id="ul1">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

</html>
//版权 北京智能社©, 保留所有权利

function getStyle(obj,name){

    return (obj.currentStyle || getComputedStyle(obj,false))[name];

}

function move(obj,json,options){

    options = options || {};

    options.duration = options.duration || ;

    options.easing = options.easing || "ease-out";

    var start = {};

    var dis = {};

    for(var name in json){

        start[name] = parseFloat(getStyle(obj,name));

        dis[name] = json[name] - start[name];

    }

    var count = Math.round(options.duration/);

    var n = ;

    clearInterval(obj.timer);

    obj.timer = setInterval(function(){

        n++;

        for(var name in json){

            var cur = start[name] + dis[name]/count*n;

            switch(options.easing){

                case "linear":

                    var a = n/count;

                    var cur = start[name] + dis[name]*a;

                    break;

                case "ease-in":

                    var a = n/count;

                    var cur = start[name] + dis[name]*Math.pow(a,);

                    break;

                case "ease-out":

                    var a =  - n/count;

                    var cur = start[name] + dis[name]*( - Math.pow(a,));

                    break;

            }

            if(name == "opacity"){

                obj.style.opacity = cur;

                obj.style.filter = "alpha(opacity:"+cur*+")";

            } else {

                obj.style[name] = cur + "px";

            }

        }

        if(n == count){

            clearInterval(obj.timer);

            options.complete && options.complete();

        }

    },);

}

js运动例子1的更多相关文章

  1. JS运动从入门到兴奋1

    hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...

  2. JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  4. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  5. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  6. 关于js运动的一些总结

    js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中 ...

  7. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

  8. JS运动 - 无缝滚动和缓动动画

    JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...

  9. 解析JS运动

    解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法:      1.运动的物体使用绝对定位 ...

随机推荐

  1. 【angular2+typeScript+ng-zorro】Carousel 走马灯的左右方向控件实现

    ng-zorro Carousel 走马灯的左右方向控件实现 ng-zorro框架的走马灯本身还没有左右方向控件的实现,作者只是在文档中(0.6x)中曝出几个方法接口,如图: 实现: 在根compon ...

  2. Spring通过ApplicationContext主动获取bean

    有些场景无法通过AutoWired和compoment注解传递进来,于是希望通过Spring context主动去获取beandemo: package com.qhong.Util; import ...

  3. Dubbo学习参考

    参考博客: 小宝鸽:https://blog.csdn.net/u013142781/article/details/50387583 https://blog.csdn.net/u013142781 ...

  4. github issues的操作

    https://help.github.com/en/articles/searching-issues-and-pull-requests 根据 reporter筛选issues https://h ...

  5. axis2框架用wsdl文件生成的服务端MessageReceiveInOut文件注意事项

    在用axis2生成服务端文件和客户端文件,当客户端文件调用服务端文件时,都是通过wsdl文件生成的 配置文件进行相互的调用. 在一开始做开发测试的时候,通过soapUI进行调用接口的时候,可以调用成功 ...

  6. 【Coursera】SecondWeek(2)

    The First Two Packets on the Internet Leonard Kleinrock Kleinrock 是一名工程师和计算机科学家,他在APRANET网络中起到了至关重要的 ...

  7. 简易页面场景滚动的jquery插件

    (function($){ $.extend($.fn, { scene_scroll:function(arg_obj){ // 参数检测 // 场景数组 var $scene_arr = arg_ ...

  8. python 压缩tar 包

    import tarfile import os def make_targz(output_filename, source_dir): print("doing!") with ...

  9. 算法笔记--树的直径 && 树形dp && 虚树 && 树分治 && 树上差分 && 树链剖分

    树的直径: 利用了树的直径的一个性质:距某个点最远的叶子节点一定是树的某一条直径的端点. 先从任意一顶点a出发,bfs找到离它最远的一个叶子顶点b,然后再从b出发bfs找到离b最远的顶点c,那么b和c ...

  10. MyBatis3-基于注解的示例

    在基于注解的示例中,可以简化编写XML的过程,全部采用注解方式进行编写,并在注解上写SQL语句,语句和XML的语句保持一致,并且可以省略掉XML文件不用引入的好处.但还有一点,基于注解的方式还没有百分 ...