<!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. 20145336 张子扬 《网络对抗技术》 web安全基础实践

    2014536 张子扬<网络攻防>Exp9 Web安全基础实践 实验准备 开启webgoat 1)开启webgoat,打开WebGoat: java -jar webgoat-contai ...

  2. define和typedef

    #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,只有在编译已被展开的源程序时才会发现可能的错误并报错. 所以define后加分号,不然会把分号也会一 ...

  3. 常用maven命令总结

    常用Maven命令: mvn -v //查看版本 mvn archetype:create //创建 Maven 项目 mvn compile //编译源代码 mvn test-compile //编 ...

  4. win7下把电脑设置成wlan热

    有很多公司没有无线网,只有自己的电脑可以上网,现在设置热点,可以手机上网 步骤: 1.看自己的网卡是否支持承载网络,如果不支持,本法就不适用 在CMD里用    netsh wlan show dri ...

  5. POJ 1222 EXTENDED LIGHTS OUT（高斯消元）题解

    题意:5*6的格子,你翻一个地方,那么这个地方和上下左右的格子都会翻面,要求把所有为1的格子翻成0,输出一个5*6的矩阵,把要翻的赋值1,不翻的0,每个格子只翻1次 思路:poj 1222 高斯消元详 ...

  6. C#学习笔记（一）：C#简介

    计算机语言计算机语言是指用于人与计算机之间通讯的语言机器码——汇编语言——高级语言(面向过程(线性).面向对象(类).面向组件(Unity)) 一.计算机语言发展趋势1.简单:代码生成逻辑2.面向人类 ...

  7. ajax实现highchart与数据库数据结合完整案例分析（三）---柱状折线图

    作者原创,未经博主允许,不可转载 在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求 实现highchart. 先展示一下实现的效果图: 用ajax ...

  8. 【旧版本】Ubuntu 14.04 下 P416编译器 p4c的安装

    注:此为2017年5月份的安装方法,最新的p4c安装方法见: Ubuntu14.04下 安装p4c 参考: p4c README Ubuntu 14.04 下 P4v16编译器 p4c的安装 系统要求 ...

  9. 改变checkbox样式问题

    选择1   选择2 选择3 选择4 选择5 <form action=""> <label for="test">选择1 <inp ...

  10. HDU 6141 I am your Father!（最小树形图+权值编码）

    http://acm.hdu.edu.cn/showproblem.php?pid=6141 题意: 求最大树形图. 思路: 把边的权值变为负值,那么这就是个最小树形图了,直接套模板就可以解决. 有个 ...