<!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. Cron表达式详解和表达式的验证

    本篇不算原创,因为主要内容来自网上的博客,所以给出我参考文章的链接. 本文cron表达式详解的大部分内容参考了[cron表达式详解]和Quartz使用总结.Cron表达式 这两篇文章. cron校验的 ...

  2. Cocoa 初识

    1,判断程序是否第一次启动 OC: if (![[NSUserDefaults stringOfKeyInStandardDefaults:FirstOpenApp] boolValue]) { [s ...

  3. luogu P2073 送花 线段树

    思路&心路 一眼认定沙比提 写的比较慢,写了1小时吧 开心的交上去 卧槽,只有20? 不服不服,拿着题解的代码去对拍 Emma,<100没问题 100000数据错了,还只是错了一个数据 ...

  4. HDU1251 统计难题 （字典树模板）题解

    思路:模板题,贴个模板 代码: #include<cstdio> #include<cstring> #include<cstdlib> #include<q ...

  5. RedHat6使用CentOS yum源 换yum

    yum 简单介绍一下 yum 主要功能是更方便的添加/删除/更新RPM 包,自动解决包的倚赖性问题,便于管理大量系统的更新问题. yum 可以同时配置多个资源库(Repository),简洁的配置文件 ...

  6. Ubuntu 14.04 安装libssh

    参考: libssh [CMake] include command Ubuntu 14.04 安装libssh $ git clone https://github.com/substack/lib ...

  7. UVa 1151 买还是建

    https://vjudge.net/problem/UVA-1151 题意: 平面上有n个点,你的任务是让所有n个点连通.为此,你可以新建一些边,费用等于两个端点的距离平方和.另外还有q个套餐可以购 ...

  8. confluence导出pdf 文字显示不全

    当使用confluence编辑页面时,当一行的文字过多,且中间没什么逗号分隔时,有时会出现导出的pdf文件中,这一行显示的文字不全的情况. 如: 很明显费用的费字没有显示完全,且后面还有其他的字. 可 ...

  9. BZOJ 1068 【SCOI2007】 压缩

    题目链接:压缩 区间动归水题.稍微有一点细节. 令\(f_{l,r}\)表示区间\([l,r]\)最短压缩长度,默认\(l\)位置之前有个\(M\).然后就枚举一下放不放\(R\),\(M\)放哪个位 ...

  10. 【BZOJ】[HNOI2015]菜肴制作

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4010 要是考场上想不出,但是还是有一个分治的做法的嘛 做法就是反向连边,然后再反向输出字典 ...