<!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. ubuntu服务器安装FTP服务

    目录 ubuntu服务器安装FTP服务 一.实验环境 二.安装配置FTP 下载ftp 配置环境 新建用户 ubuntu服务器安装FTP服务 参考教程 [ubuntu16.04搭建ftp服务器 一.实验 ...

  2. 【前端】javascript实现鼠标跟随特效

    实现效果: 实现代码: <!DOCTYPE html> <html> <head> <title>鼠标跟随</title> <meta ...

  3. P2894 [USACO08FEB]酒店Hotel 线段树

    题目大意 多次操作 查询并修改区间内长度==len的第一次出现位置 修改区间,变为空 思路 类似于求区间最大子段和(应该是这个吧,反正我没做过) 维护区间rt的 从l开始向右的最长长度 从r开始向左的 ...

  4. luogu P2114 [NOI2014]起床困难综合症 位运算 二进制

    建议去uoj那里去测,数据比较强 位运算的题目,就得一位一位的分开考虑 然后枚举初始值的最高位是0 是1 的最终攻击 (二进制内)最高位是1肯定比次位是1次次位是1次次次位是1···的大吧,显然 然后 ...

  5. [BZOJ1122][POI2008]账本BBB 单调队列+后缀和

    Description 一个长度为n的记账单,+表示存￥1,-表示取￥1.现在发现记账单有问题.一开始本来已经存了￥p,并且知道最后账户上还有￥q.你要把记账单修改正确,使得 1:账户永远不会出现负数 ...

  6. [JVM] - 一份<自己动手写Java虚拟机>的测试版

    go语言下载 配置GOROOT(一般是自动的),配置GOPATH(如果想自己改的话) 参照<自己动手写Java虚拟机> > 第一章 指令集和解释器 生成了ch01.exe文件 这里还 ...

  7. HDU 1548 A strange lift （Dijkstra）

    https://vjudge.net/problem/HDU-1548 题意: 电梯每层有一个不同的数字,例如第n层有个数字k,那么这一层只能上k层或下k层,但是不能低于一层或高于n层,给定起点与终点 ...

  8. hihocode 九十七周 中国剩余定理

    题目1 : 数论六·模线性方程组 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho:今天我听到一个挺有意思的故事! 小Hi:什么故事啊? 小Ho:说秦末,刘邦的将军 ...

  9. Python matplot的使用（一）

    其实,使用它的直接原因是因为matlab太大了,不方便.另外,就是它是免费的. 在安装这个库的时候,会需要安装一些它所依赖的库,比如six等.从sourceforge上下载,只需按照提示安装完成就行了 ...

  10. c++ 判断给定区间是否是一个heap. O(N) (is_heap)

    #include <iostream> // cout #include <algorithm> // is_heap, make_heap, pop_heap #includ ...