<!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. POJ 1260 Pearls （斜率DP）题解

    思路: 直接DP也能做,这里用斜率DP. dp[i] = min{ dp[j] + ( sum[i] - sum[j] + 10 )*pr[i]} ; k<j<i  =>  dp[j ...

  2. c#进阶之Delegate

    委托是什么?答:委托是一种类型   等同与 一个class类,继承System.MulticastDelegate,但mult....gate是一个特殊类,不能够派生 委托的调用,如何去使用 1/委托 ...

  3. 列举一些有所帮助的blog和文章

    w3school hdoj imooc CSDN Github myGithub CmdMarkdown 一直在路上--记我从初中到本科近十年的学习成长历程 作者:周见智 C++中队列的建立与操作详细 ...

  4. HDU 6156 Palindrome Function

    http://acm.hdu.edu.cn/showproblem.php?pid=6156 题意:$f(n,k)$表示判断n在k进制下是否是回文串,如果是,则返回k,如果不是,则返回1.现在要计算$ ...

  5. UVa 1631 密码锁

    https://vjudge.net/problem/UVA-1631 题意: 有一个n位密码锁,每位都是0~9,可以循环旋转.每次可以让1~3个相邻数字同时往上或者往下转一格.输入初始状态和终止状态 ...

  6. IntelliJ IDEA问题总结

    在使用Idea的过程中,会遇到各种各样的问题,下面我将在这里持续总结: 1.Unable to import maven project: See logs for details 在遇到这个问题时, ...

  7. 如何新建一个datatable，并往表里赋值

    顺序是新建对象-->新建列-->新建行,示例代码如下: DataTable dt=new DataTable(); //新建对象 dt.Columns.Add("姓名" ...

  8. python enumerate用法总结--转载

    enumerate()说明 enumerate()是python的内置函数 enumerate在字典上是枚举.列举的意思 对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enum ...

  9. java中Scanner类nextInt之后用nextLine无法读取输入

    http://blog.csdn.net/wjy1090233191/article/details/42080029 这篇文章写得非常详细和准确

  10. python 获取格式化时间

    #!/usr/bin/python # -*- coding: UTF- -*- import time localtime = time.asctime( time.localtime(time.t ...